/* WikiMasters shell and page rhythm. The native application owns layout, scrolling,
   breakpoints and stacking; no game grid, illustrated card or portal is rebuilt here.
   site-theme.css supplies the graphite material and green native-site tokens. */

html[data-wme-theme="graphite"] [data-wme-main] {
  min-inline-size: 0;
  background-color: var(--color-background);
  scrollbar-color: var(--wme-site-raised) transparent;
}

/* Constrain ordinary page content, never the scrolling main element or battle arena.
   The hook is attached only to the observed top-level p-4 / md:p-6 page wrapper. */
html[data-wme-theme="graphite"] body:is(
  [data-wme-page="collection"], [data-wme-page="global-collection"],
  [data-wme-page="marketplace"], [data-wme-page="trades"],
  [data-wme-page="profile"], [data-wme-page="friends"],
  [data-wme-page="achievements"], [data-wme-page="leaderboard"],
  [data-wme-page="settings"]
) [data-wme-page-content] {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 1440px;
  min-inline-size: 0;
  margin-inline: auto;
  padding: 24px clamp(16px, 2.8vw, 40px) 40px;
}

html[data-wme-theme="graphite"] body[data-wme-page="settings"] [data-wme-page-content] {
  max-inline-size: 760px;
  margin-inline-start: 0;
}

html[data-wme-theme="graphite"] body:is(
  [data-wme-page="profile"], [data-wme-page="friends"],
  [data-wme-page="leaderboard"]
) [data-wme-page-content] {
  max-inline-size: 1120px;
}

/* Native usernames are also h1 elements. Only page-title size classes qualify. */
html[data-wme-theme="graphite"] [data-wme-main] h1:is(
  [class~="text-2xl"], [class~="text-3xl"]
):not([data-wme-card-art], [data-wme-card-art] *) {
  color: var(--color-foreground);
  font-family: var(--wme-site-font);
  font-size: clamp(1.65rem, 2.35vw, 2.15rem);
  font-weight: 650;
  line-height: 1.16;
  letter-spacing: -.035em;
}

html[data-wme-theme="graphite"] [data-wme-main] [data-wme-header] {
  gap: 16px;
}

html[data-wme-theme="graphite"] [data-wme-main] [data-wme-header] > :is(h1, h2) {
  min-inline-size: 0;
}

html[data-wme-theme="graphite"] [data-wme-main] [data-wme-header] p {
  line-height: 1.55;
}

html[data-wme-theme="graphite"] [data-wme-main] [data-wme-panel] > :is(h2, h3) {
  font-weight: 600;
  letter-spacing: -.015em;
}

/* Desktop navigation is a continuous graphite surface, with one selected row. */
html[data-wme-theme="graphite"] [data-wme-nav="desktop"] {
  gap: 4px;
  padding: 24px 12px 16px;
  border-inline-end-color: var(--wme-site-line);
  background: var(--wme-site-panel);
  scrollbar-color: var(--wme-site-raised) transparent;
}

html[data-wme-theme="graphite"] [data-wme-nav="desktop"] > div:first-child {
  margin-block-end: 24px;
  padding-inline: 12px;
}

html[data-wme-theme="graphite"] [data-wme-nav="desktop"] h1 {
  font-family: var(--wme-site-font);
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -.04em;
}

html[data-wme-theme="graphite"] [data-wme-nav-item] {
  color: var(--wme-site-muted);
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  font-weight: 500;
  text-decoration: none;
}

html[data-wme-theme="graphite"] [data-wme-nav="desktop"] [data-wme-nav-item] {
  min-block-size: 44px;
  gap: 12px;
  padding: 11px 14px;
  font-size: 13px;
  line-height: 1.45;
}

html[data-wme-theme="graphite"] [data-wme-nav-item] > span:first-child {
  color: inherit;
}

html[data-wme-theme="graphite"] [data-wme-nav-item]:hover {
  color: var(--color-foreground);
  background: var(--wme-site-hover);
}

html[data-wme-theme="graphite"] [data-wme-nav-item]:focus-visible {
  outline: 2px solid var(--color-accent-light);
  outline-offset: 2px;
}

html[data-wme-theme="graphite"] [data-wme-nav-item][data-wme-current="true"] {
  color: var(--color-accent-foreground) !important;
  background: linear-gradient(180deg, rgb(245 245 247 / 13%), transparent 62%), var(--color-accent) !important;
  box-shadow: inset 0 1px 0 rgb(245 245 247 / 28%), inset 0 -1px 0 rgb(6 43 30 / 20%), 0 1px 3px var(--wme-site-shadow);
  font-weight: 600;
}

html[data-wme-theme="graphite"] [data-wme-nav-item][data-wme-current="true"]:hover {
  background: #49dba6 !important;
}

html[data-wme-theme="graphite"] [data-wme-nav-item][data-wme-current="true"] :is(svg, span) {
  color: inherit !important;
}

/* The native active dot duplicates the selected surface and label. */
html[data-wme-theme="graphite"] [data-wme-nav="desktop"]
[data-wme-nav-item][data-wme-current="true"] > div[class~="w-1.5"][class~="h-1.5"] {
  display: none;
}

/* Preserve the bottom bar's safe-area padding, native order and z-index. */
html[data-wme-theme="graphite"] [data-wme-nav="mobile"] {
  border-block-start-color: var(--color-border);
  background: var(--wme-site-panel);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 -4px 16px rgb(5 5 7 / .12);
}

html[data-wme-theme="graphite"] [data-wme-nav="mobile"] > div > [data-wme-nav-item],
html[data-wme-theme="graphite"] [data-wme-nav="mobile"] > div > div > button {
  min-block-size: 44px;
  padding-block: 7px;
  font-size: 11px;
  line-height: 1.2;
  box-shadow: none;
}

/* The observed mobile Plus menu remains anchored above its original trigger. */
html[data-wme-theme="graphite"] [data-wme-nav="mobile"] .absolute.bottom-full {
  padding: 4px;
  border-color: var(--color-border);
  border-radius: 12px;
  background: var(--wme-site-raised);
  box-shadow: 0 12px 32px rgb(5 5 7 / .38), inset 0 1px 0 rgb(245 245 247 / .05);
}

html[data-wme-theme="graphite"] [data-wme-nav="mobile"] .absolute.bottom-full [data-wme-nav-item] {
  min-block-size: 40px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
}

/* Account settings read as groups of controls, rather than a stack of cards.
   Native destructive sections retain their distinct container and red styling. */
html[data-wme-theme="graphite"] body[data-wme-page="settings"]
[data-wme-page-content] > [data-wme-panel]:not([class*="border-red"]) {
  padding: 4px 0 24px;
  border: 0 !important;
  border-block-end: 1px solid var(--wme-site-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html[data-wme-theme="graphite"] body[data-wme-page="settings"]
[data-wme-page-content] > [data-wme-panel]:not([class*="border-red"])::before {
  display: none;
}

html[data-wme-theme="graphite"] body[data-wme-page="settings"]
[data-wme-panel]:not([class*="border-red"]) > :is(h2, h3) {
  color: var(--color-foreground);
  font-size: 14px;
  line-height: 1.5;
}

/* The profile's lone unique-card counter is information, not an action. */
html[data-wme-theme="graphite"] body[data-wme-page="profile"]
div[data-wme-panel].p-4.text-center:not(.flex) {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: start;
}

html[data-wme-theme="graphite"] body[data-wme-page="profile"]
div[data-wme-panel].p-4.text-center:not(.flex)::before {
  display: none;
}

html[data-wme-theme="graphite"] body[data-wme-page="profile"]
div[data-wme-panel].p-4.text-center:not(.flex) > div {
  margin-block-start: 0;
}

/* Existing friend and conversation rows remain continuous lists with avatars.
   No changes to message-bubble widths, chat scroll regions or guild columns. */
html[data-wme-theme="graphite"] body:is([data-wme-page="dms"], [data-wme-page="friends"])
[data-wme-main] .space-y-1 > button.w-full.text-left {
  padding: 14px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  transform: none;
}

html[data-wme-theme="graphite"] body:is([data-wme-page="dms"], [data-wme-page="friends"])
[data-wme-main] .space-y-1 > button.w-full.text-left:hover {
  background: var(--wme-site-hover);
}

/* Read-only public documents use the document itself as the surface. */
html[data-wme-theme="graphite"] body:is([data-wme-page="terms"], [data-wme-page="rules"], [data-wme-page="privacy"]) main {
  min-block-size: 100dvh;
  padding-block: clamp(32px, 5vw, 64px);
}

html[data-wme-theme="graphite"] body:is([data-wme-page="terms"], [data-wme-page="rules"], [data-wme-page="privacy"]) article.card-frame {
  max-inline-size: 800px;
  padding: 24px clamp(8px, 3vw, 32px);
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--color-foreground);
  font-size: 15px;
  line-height: 1.75;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html[data-wme-theme="graphite"] body:is([data-wme-page="terms"], [data-wme-page="rules"], [data-wme-page="privacy"]) article.card-frame::before {
  display: none;
}

html[data-wme-theme="graphite"] body:is([data-wme-page="terms"], [data-wme-page="rules"], [data-wme-page="privacy"]) article > header {
  padding-block-end: 24px;
  border-color: var(--color-border);
}

html[data-wme-theme="graphite"] body:is([data-wme-page="terms"], [data-wme-page="rules"], [data-wme-page="privacy"]) article h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.02em;
}

html[data-wme-theme="graphite"] body:is([data-wme-page="terms"], [data-wme-page="rules"], [data-wme-page="privacy"]) article a {
  text-underline-offset: 3px;
}

/* Authentication keeps its compact native form; browser chrome cannot crop it. */
html[data-wme-theme="graphite"] body:is(
  [data-wme-page="login"], [data-wme-page="signup"],
  [data-wme-page="forgot-password"], [data-wme-page="reset-password"],
  [data-wme-page="verify-email"]
) > div.flex.min-h-screen {
  min-height: 100dvh;
}

html[data-wme-theme="graphite"] body:is(
  [data-wme-page="login"], [data-wme-page="signup"],
  [data-wme-page="forgot-password"], [data-wme-page="reset-password"],
  [data-wme-page="verify-email"]
) .card-frame:has(> form) {
  padding: clamp(24px, 5vw, 40px);
  border-radius: 20px !important;
}

/* Public landing sections retain the site's actual card illustrations and layout. */
html[data-wme-theme="graphite"] body[data-wme-page="home"] #signup-form {
  background: var(--wme-site-panel);
}

html[data-wme-theme="graphite"] body[data-wme-page="home"] section.border-t {
  border-color: var(--wme-site-line);
}

@media (min-width: 1024px) {
  html[data-wme-theme="graphite"] body[data-wme-page="home"] #signup-form {
    min-height: 100dvh;
    height: 100dvh;
  }
}

@media (max-width: 767px) {
  html[data-wme-theme="graphite"] body:is(
    [data-wme-page="collection"], [data-wme-page="global-collection"],
    [data-wme-page="marketplace"], [data-wme-page="trades"],
    [data-wme-page="profile"], [data-wme-page="friends"],
    [data-wme-page="achievements"], [data-wme-page="leaderboard"],
    [data-wme-page="settings"]
  ) [data-wme-page-content] {
    padding: 16px 16px 28px;
  }

  html[data-wme-theme="graphite"] [data-wme-main] [data-wme-header] {
    gap: 12px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html[data-wme-theme="graphite"] [data-wme-nav-item] {
    transition: color 120ms var(--wme-site-ease), background-color 120ms var(--wme-site-ease),
      box-shadow 120ms var(--wme-site-ease);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-wme-theme="graphite"] [data-wme-nav-item] {
    transition: none;
  }
}

/* ─── Paquets ────────────────────────────────────────────────────────────────
   The native pack on the app's graphite: no spotlight, rays, dust or glow. Hooks
   come from site-theme.js; the native button, handlers, countdown and reveal
   animations are untouched. */

html[data-wme-theme="graphite"] [data-wme-pulls="stage"] {
  position: relative;
  isolation: isolate;
  min-height: min(100%, calc(100dvh - 48px));
  gap: clamp(20px, 3.4vh, 34px) !important;
}
/* Header: a plain title, a quiet subtitle, the help link as a small button. */
html[data-wme-theme="graphite"] [data-wme-pulls="header"] h1 {
  font-size: clamp(30px, 4.2vw, 44px) !important;
  letter-spacing: -.025em;
  color: #f5f5f7 !important;
}
html[data-wme-theme="graphite"] [data-wme-pulls="header"] p { color: #a1a1aa !important; }
html[data-wme-theme="graphite"] [data-wme-pulls="header"] button {
  margin-top: 6px;
  padding: 5px 12px !important;
  border-radius: 8px !important;
  color: #6ee7b7 !important;
  background: rgb(52 211 153 / 8%) !important;
  box-shadow: inset 0 0 0 1px rgb(52 211 153 / 18%) !important;
  transition: background-color 140ms ease;
}
html[data-wme-theme="graphite"] [data-wme-pulls="header"] button:hover { background: rgb(52 211 153 / 14%) !important; }

/* The pack floats, catches a light sweep, lifts on hover and presses on click. */
html[data-wme-theme="graphite"] [data-wme-pulls="pack"]:not([class*="animate-"]) {
  transform: none !important;
  filter: none !important;
  gap: clamp(18px, 3vh, 28px) !important;
  perspective: 900px;
}
html[data-wme-theme="graphite"] [data-wme-pulls="pack"] > img:not([class*="animate-"]) {
  transform-origin: 50% 60%;
  animation: wme-pulls-float 6s ease-in-out infinite;
  transition: filter 300ms ease, scale 300ms cubic-bezier(.2, .8, .2, 1), translate 300ms cubic-bezier(.2, .8, .2, 1);
}
html[data-wme-theme="graphite"] [data-wme-pulls="pack"]:not(:disabled):hover > img {
  scale: 1.03;
  translate: 0 -8px;
  filter: drop-shadow(0 26px 24px rgb(0 0 0 / 50%)) !important;
}
html[data-wme-theme="graphite"] [data-wme-pulls="pack"]:not(:disabled):active > img {
  scale: .98;
  translate: 0 -2px;
  transition-duration: 90ms;
}

/* "Ouvrir" becomes the page's primary action. */
html[data-wme-theme="graphite"] [data-wme-pulls="cta"] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 30px;
  border-radius: 12px;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #062b1e !important;
  background: linear-gradient(180deg, rgb(245 245 247 / 22%), transparent 62%), #34d399;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%), inset 0 -1px 0 rgb(4 60 40 / 35%), 0 1px 3px rgb(0 0 0 / 40%);
  filter: none !important;
  transition: background-color 120ms ease, transform 120ms ease;
}
html[data-wme-theme="graphite"] [data-wme-pulls="pack"]:not(:disabled):hover [data-wme-pulls="cta"] {
  background-color: #4ade9f;
}
html[data-wme-theme="graphite"] [data-wme-pulls="pack"]:not(:disabled):active [data-wme-pulls="cta"] { transform: translateY(1px); }
html[data-wme-theme="graphite"] [data-wme-pulls="pack"]:disabled [data-wme-pulls="cta"] {
  color: #a1a1aa !important;
  background: #232327;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%), 0 0 0 1px rgb(255 255 255 / 7%);
}

/* Stock: big count, ten segments, the recharging one fills with the countdown. */
html[data-wme-theme="graphite"] [data-wme-pulls="stock"] {
  min-width: min(300px, 86vw);
  padding: 16px 22px 18px !important;
  gap: 6px !important;
  border-radius: 14px !important;
}
html[data-wme-theme="graphite"] [data-wme-pulls="stock"] > div.text-lg {
  font-size: 30px !important;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
html[data-wme-theme="graphite"] [data-wme-pulls="stock"] > div:not(.text-lg) {
  font-size: 12.5px !important;
  color: #a1a1aa !important;
}
html[data-wme-theme="graphite"] [data-wme-pulls="stock"] > div.text-lg + div {
  order: 2;
  margin-top: 2px;
  font-size: 12.5px !important;
  font-weight: 500;
  color: #a1a1aa !important;
}
html[data-wme-theme="graphite"] [data-wme-pulls="stock"] > div:last-child:not(.text-lg + div) { order: 4; }
html[data-wme-theme="graphite"] [data-wme-pulls="stock"]::after {
  content: "";
  order: 3;
  width: 100%;
  height: 8px;
  margin: 10px 0 4px;
  border-radius: 3px;
  background:
    linear-gradient(90deg, #34d399, #6ee7b7) 0 0 / calc(var(--wme-stock, 0) * 10%) 100% no-repeat,
    linear-gradient(90deg, rgb(52 211 153 / 38%), rgb(52 211 153 / 38%)) 0 0 / calc((var(--wme-stock, 0) + var(--wme-regen, 0)) * 10%) 100% no-repeat,
    rgb(245 245 247 / 8%);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 3px), transparent calc(10% - 3px) 10%);
  mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 3px), transparent calc(10% - 3px) 10%);
  transition: background-size 900ms linear;
}

@keyframes wme-pulls-float {
  0%, 100% { transform: translateY(0) rotate(-1.2deg) rotateY(-6deg); }
  50% { transform: translateY(-12px) rotate(1.2deg) rotateY(6deg); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-wme-theme="graphite"] [data-wme-pulls="pack"] > img { animation: none !important; }
}
html[data-wme-theme="graphite"] [data-wme-pulls="header"] { margin-bottom: 14px; }