/* DEEPMINE UI v4 — 新手欢迎弹窗 (<dialog id="welcome-intro" class="welcome-dialog welcome-intro">, markup in
   public/welcome-intro.mjs). Reuses the welcome-dialog material from ui/shell.css (gold rim, jade plate, scrim, header,
   kicker, close button, actions) and adds: a painted hero (the splash camp + the logo + the four-step flow strip), four
   illustrated steps joined by a dashed "shaft" line, the server-wide pool chip, the sell-tax and withdrawal chips and the
   small print. The middle scrolls; the actions stay on screen down to 320×568 (the dialog is a flex column). Short
   screens drop the decoration first (ramp, logo) so the flow strip and the steps keep the room. Not re-rendered while open (only the live number changes), so the one-time
   entrance is safe; all of it is off under html.reduce-motion / low-quality and the OS preference. */
@layer pages {
  .welcome-intro { width: min(392px, calc(100vw - 24px)); }
  .welcome-intro[open] { display: flex; flex-direction: column; overflow: hidden; }
  .welcome-intro .intro-scroll { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }

  /* ── Hero ── */
  /* Top row: kicker | logo | × (the logo sits between them, so it costs no height of its own). */
  .welcome-intro .intro-hero { gap: 4px; padding: 8px 14px 14px; }
  .welcome-intro .intro-hero > .welcome-kicker { margin-block: 9px 10px; }
  .welcome-intro .intro-hero::before {
    background:
      radial-gradient(70% 60% at 50% 38%, rgb(245 200 105 / .22), transparent 70%),
      linear-gradient(180deg, rgb(8 24 18 / .2) 0%, rgb(12 36 27 / .5) 46%, rgb(15 44 33 / .9) 78%, #12382a 100%),
      url(/art/ui-v4/banners/splash.webp) center 68% / cover no-repeat;
  }
  .welcome-intro .intro-logo {
    position: absolute;
    top: 4px;
    left: 50%;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin-left: -25px;
    pointer-events: none;
    animation: intro-logo-in .7s var(--ease-spring) .12s both;
  }
  .welcome-intro .intro-logo::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: repeating-conic-gradient(from 8deg, rgb(255 222 150 / .2) 0deg 7deg, transparent 7deg 24deg);
    -webkit-mask: radial-gradient(circle, #000 22%, transparent 70%);
    mask: radial-gradient(circle, #000 22%, transparent 70%);
  }
  .welcome-intro .intro-logo img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 16px rgb(0 0 0 / .6)) drop-shadow(0 0 22px rgb(245 200 105 / .4)); }
  .welcome-intro .intro-hero h2 {
    max-width: 100%;
    font: 800 25px/1.15 var(--font-ui);
    letter-spacing: .02em;
    background: linear-gradient(180deg, #fff6d8 10%, var(--gold-200) 55%, var(--gold-400) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 0 rgb(60 36 8 / .9)) drop-shadow(0 4px 10px rgb(0 0 0 / .7));
    overflow-wrap: break-word;
    text-wrap: balance;
  }
  /* keep-all: Chinese breaks at the spaces and punctuation of the hook (never inside 钱包); Latin text is unaffected. */
  .welcome-intro #intro-hook { max-width: 30em; font-size: var(--fs-13); font-weight: 700; line-height: 1.45; color: var(--text-1); text-shadow: 0 1px 6px rgb(0 0 0 / .8); word-break: keep-all; overflow-wrap: anywhere; }
  /* The flow strip: a four-column stepper ① 挖矿 → ② 交售 → ③ 换 GRAM → ④ 提现 (aria-hidden; the steps below carry the
     copy), so the whole flow is on screen at every size. Labels wrap inside their column; dashed links join the dots. */
  .welcome-intro .intro-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; width: 100%; max-width: 340px; margin: 8px 0 0; padding: 0; list-style: none; }
  .welcome-intro .intro-flow li { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; min-width: 0; text-align: center; }
  .welcome-intro .intro-flow li + li::before {
    content: '';
    position: absolute;
    top: 11px;
    right: calc(50% + 16px);
    width: calc(100% - 28px);
    border-top: 2px dashed rgb(242 205 128 / .55);
  }
  .welcome-intro .intro-flow b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--grad-gold); color: var(--text-on-gold); font: 800 12px/1 var(--font-display); box-shadow: 0 0 0 2px rgb(6 19 14 / .7), 0 2px 6px rgb(0 0 0 / .5); }
  .welcome-intro .intro-flow span { max-width: 100%; font-size: var(--fs-12); font-weight: 800; line-height: 1.2; color: var(--text-1); text-shadow: 0 1px 4px rgb(0 0 0 / .9); overflow-wrap: break-word; hyphens: auto; }

  /* ── Steps: one card per step, art tiles joined by a dashed shaft line ── */
  .welcome-intro .intro-body { gap: 8px; padding: 10px 12px 12px; }
  .welcome-intro .intro-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .welcome-intro .intro-step {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 8px 12px 8px 10px;
    border-radius: var(--r-lg);
    background: linear-gradient(100deg, rgb(245 200 105 / .07), transparent 46%), rgb(4 14 10 / .4);
    border: 1px solid var(--line-1);
    animation: intro-step-in .42s var(--ease-out) both;
    animation-delay: calc(.2s + var(--i, 0) * 70ms);
  }
  .welcome-intro .intro-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 35px;
    top: 62px;
    bottom: -17px;
    border-left: 2px dashed rgb(242 205 128 / .4);
    pointer-events: none;
  }
  .welcome-intro .intro-step-art {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: radial-gradient(circle at 50% 32%, #2f6a50, #163b2c 78%);
    border: 1.5px solid var(--gold-400);
    box-shadow: inset 0 2px 0 rgb(255 255 255 / .14), 0 0 14px -2px rgb(245 190 80 / .35), 0 4px 10px rgb(0 0 0 / .35);
  }
  .welcome-intro .intro-step-art .intro-art-img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .5)); }
  .welcome-intro .intro-step-art .gi { width: 38px; height: 38px; }
  .welcome-intro .intro-step-art.is-withdraw { color: var(--ton); }
  .welcome-intro .intro-step-art.is-withdraw svg { width: 36px; height: 36px; }
  .welcome-intro .intro-coins { position: relative; width: 42px; height: 38px; }
  .welcome-intro .intro-coin { position: absolute; width: 26px; height: 26px; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .5)); }
  .welcome-intro .intro-coin.is-dmt { left: 0; top: 0; }
  .welcome-intro .intro-coin.is-ton { right: 0; bottom: 0; }
  .welcome-intro .intro-step-num {
    position: absolute;
    top: -7px;
    left: -7px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--grad-gold);
    color: var(--text-on-gold);
    font: 800 12px/1 var(--font-display);
    box-shadow: 0 0 0 2px #10301f, 0 2px 4px rgb(0 0 0 / .45);
  }
  .welcome-intro .intro-step-copy { display: grid; justify-items: start; gap: 3px; min-width: 0; padding-top: 1px; }
  /* Title row: the title, and for ① the mineral ramp beside it (wraps under a long title). */
  .welcome-intro .intro-step-head { justify-self: stretch; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
  .welcome-intro .intro-step-copy h3 { margin: 0; font-size: var(--fs-15); font-weight: 800; line-height: 1.25; color: var(--text-1); }
  .welcome-intro .intro-step-copy p { font-size: 12.5px; line-height: 1.45; color: var(--text-2); overflow-wrap: break-word; }

  /* ① deeper = rarer: five painted minerals, common → exotic */
  .welcome-intro .intro-ramp { display: flex; align-items: center; gap: 3px; }
  .welcome-intro .intro-ramp-gem {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--rarity, #8da) 45%, transparent), transparent 72%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rarity, #8da) 45%, transparent);
  }
  .welcome-intro .intro-ramp-gem img { width: 20px; height: 20px; object-fit: contain; }
  .welcome-intro .intro-ramp-arrow { flex: none; width: 5px; height: 5px; border-top: 1.5px solid var(--text-3); border-right: 1.5px solid var(--text-3); transform: rotate(45deg); opacity: .8; }
  .welcome-intro .intro-step-note { display: flex; align-items: flex-start; gap: 5px; margin-top: 2px; font-size: var(--fs-11); line-height: 1.45; color: var(--text-3); word-break: keep-all; overflow-wrap: anywhere; }
  .welcome-intro .intro-step-note .icon { flex: none; width: 13px; height: 13px; margin-top: 1px; color: var(--warn); }

  /* ② server-wide chip: this round's pool budget, shared by all players (from the view, refreshed while open). A neutral
     chip with the globe, as on the pool page's 本轮全服数据, so it never reads as a personal reward. A long translated
     label wraps inside the chip; the number and its unit never split. */
  .welcome-intro .intro-live { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-height: 26px; margin-top: 3px; padding: 3px 10px 3px 8px; border-radius: var(--r-md); white-space: normal; }
  .welcome-intro .intro-live > .icon { flex: none; width: 14px; height: 14px; color: var(--text-3); }
  .welcome-intro .intro-live > span { min-width: 0; line-height: 1.25; overflow-wrap: break-word; }
  .welcome-intro .intro-live b { flex: none; font: 800 14px/1 var(--font-display); color: var(--text-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .welcome-intro .intro-live small { flex: none; font-size: var(--fs-10); color: var(--text-3); }

  /* ③ sell taxes · ④ withdrawal limits */
  .welcome-intro .intro-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
  .welcome-intro .intro-chips .chip { max-width: 100%; white-space: normal; overflow-wrap: break-word; }

  /* Small print: with the actions (never scrolled away), one quiet line above 开始挖矿. */
  .welcome-intro .intro-fineprint { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 2px; font-size: var(--fs-11); line-height: 1.45; color: var(--text-3); overflow-wrap: break-word; }
  .welcome-intro .intro-fineprint .icon { flex: none; width: 13px; height: 13px; margin-top: 1px; color: var(--text-3); }

  /* ── Actions: outside the scroller, always on screen ── */
  .welcome-intro .intro-actions {
    position: relative;
    flex: none;
    gap: 8px;
    margin: 0;
    padding: 12px 14px 14px;
    background: #0b2219;
    border-top: 1px solid rgb(242 205 128 / .16);
  }
  .welcome-intro .intro-actions::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 18px; background: linear-gradient(180deg, rgb(11 34 25 / 0), #0b2219); pointer-events: none; }
  .welcome-intro .intro-actions .btn { min-width: 0; }
  .welcome-intro .intro-actions .btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  @keyframes intro-logo-in { 0% { opacity: 0; transform: scale(.4) rotate(-12deg); } 70% { opacity: 1; transform: scale(1.08) rotate(3deg); } 100% { opacity: 1; transform: none; } }
  @keyframes intro-step-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

  html:is(.reduce-motion, .low-quality) .welcome-intro :is(.intro-logo, .intro-step) { animation: none; }
  html.low-quality .welcome-intro .intro-logo::before { display: none; }
  @media (prefers-reduced-motion: reduce) {
    .welcome-intro :is(.intro-logo, .intro-step) { animation: none; }
  }

  /* ── Shorter phones (375×667, 360×740): the decorative ramp goes first ── */
  @media (max-height: 760px) {
    .welcome-intro .intro-ramp { display: none; }
  }

  /* ── Short screens (320×568 and landscape phones) ── */
  @media (max-height: 640px) {
    .welcome-intro .intro-hero { gap: 2px; padding-block: 6px 10px; }
    .welcome-intro .intro-hero > .welcome-kicker { margin-block: 9px 8px; }
    .welcome-intro .intro-logo { top: 3px; width: 46px; height: 46px; margin-left: -23px; }
    .welcome-intro .intro-hero h2 { font-size: 20px; }
    .welcome-intro #intro-hook { font-size: var(--fs-12); line-height: 1.4; }
    .welcome-intro .intro-flow { margin-top: 6px; }
    .welcome-intro .intro-flow span { font-size: var(--fs-11); }
    .welcome-intro .intro-body { padding-block: 10px; }
    .welcome-intro .intro-step { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 8px 10px 8px 8px; }
    .welcome-intro .intro-step:not(:last-child)::after { left: 29px; top: 54px; bottom: -17px; }
    .welcome-intro .intro-step-art { width: 44px; height: 44px; border-radius: 12px; }
    .welcome-intro .intro-step-art .intro-art-img { width: 38px; height: 38px; }
    .welcome-intro .intro-step-art .gi, .welcome-intro .intro-step-art.is-withdraw svg { width: 32px; height: 32px; }
    .welcome-intro .intro-coins { transform: scale(.86); }
    .welcome-intro .intro-step-copy p { font-size: var(--fs-12); }
    .welcome-intro .intro-actions { padding: 10px 12px 12px; gap: 6px; }
    .welcome-intro .intro-actions .btn--lg { min-height: 48px; }
  }
}