/* 匙玩社专属页。暗场 + 每款游戏自己的霓虹强调色。

   为什么是暗底：这页的主角是游戏主视觉，而主视觉是满幅出血的。浅底会把它框成
   一张缩略图，暗底才衬得住；每款游戏的 --neon 也都是为深色底挑的，放在白底上
   根本发不出来。 */

:root {
  color-scheme: dark;

  --bg: #0a0c0e;
  --ink: #e9edef;
  --muted: #8b9499;
  --line: #222a2f;
  --card: #13171a;
  /* 卡片里再嵌一层的面板（教程折叠条、DNS 格子），比卡片再亮一档 */
  --card-2: #191f23;
  --btn: #1a2024;
  --btn-line: #2a3238;
  --field: #07090a;

  /* --neon 是每款游戏唯一的强调色，四个主题各自覆盖。
     --neon-ink 是压在 --neon 上的字色，必须跟着一起换——霓虹黄上压白字看不清。 */
  --neon: #ff5a6e;
  --neon-ink: #2b0007;
  --neon-ring: #ff5a6e40;
  --neon-soft: #ff5a6e1c;

  --ok: #7fe0a5;
  --ok-bg: #12241a;
  --ok-line: #24523a;
  --warn: #ffc65c;
  --warn-bg: #241d0c;
  --warn-line: #55431a;
  --danger: #ff8478;
  --danger-bg: #261412;
  --danger-line: #5a2b26;
  --review: #a9c2e0;
  --review-bg: #141b24;
  --review-line: #2a3a4d;
}

/* 主题只换霓虹与底色的色温，结构一律共用。
   这些强调色原本就取自各自的官方主视觉，在暗底上才是它们该有的样子。 */
body[data-theme="splatoon-raiders"] {
  --neon: #ece65b; --neon-ink: #14170c; --neon-ring: #ece65b40; --neon-soft: #ece65b1c;
  --bg: #0a0d0c;
}
body[data-theme="rhythm-heaven-miracle-stars"] {
  /* 官方主视觉是高饱和柠檬黄 + 黑色描边。暗底上黄就是最好的强调色，
     不再需要旧版那种「黄底上按钮看不清、只好改取橙红」的迂回。 */
  --neon: #ffd320; --neon-ink: #2a2100; --neon-ring: #ffd32040; --neon-soft: #ffd3201c;
  --bg: #0d0b07;
}
body[data-theme="zelda-botw-switch2"] {
  --neon: #d9b45c; --neon-ink: #1d1605; --neon-ring: #d9b45c40; --neon-soft: #d9b45c1c;
  --bg: #0a0d0f;
}
body[data-theme="witcher3-remastered"],
body[data-theme="witcher3-claim"] {
  --neon: #6de7e2; --neon-ink: #061b1d; --neon-ring: #6de7e240; --neon-soft: #6de7e21c;
  --bg: #080d10;
}
body[data-theme="fire-emblem-fortunes-weave"] {
  /* 官方 KV 的玫红/绯红簇（采样 #c03060/#d84890/#d86090），暗底上的强调色。 */
  --neon: #d85878; --neon-ink: #2a0a12; --neon-ring: #d8587840; --neon-soft: #d858781c;
  --bg: #0f0a0b;
}
body[data-theme="mario-kart-world"] {
  /* 官方 KV 的天空青簇（采样 #71d8e7/#63b7d5/#a6dde9）。 */
  --neon: #71d8e7; --neon-ink: #06191c; --neon-ring: #71d8e740; --neon-soft: #71d8e71c;
  --bg: #080c10;
}
body[data-theme="donkey-kong-bananza"] {
  /* 官方 KV 的香蕉黄簇（采样 #f8c32d/#e6bf59/#fbed5b）。 */
  --neon: #f8c32d; --neon-ink: #2a1f00; --neon-ring: #f8c32d40; --neon-soft: #f8c32d1c;
  --bg: #0d0a06;
}
body[data-theme="zelda-ocarina-of-time"] {
  /* 官方 KV 的标题金（采样 #d0a95f），底色取森林墨绿（#0a1a13/#06110e），
     与旷野之息的海拉鲁蓝金区分开。 */
  --neon: #d0a95f; --neon-ink: #1a1405; --neon-ring: #d0a95f40; --neon-soft: #d0a95f1c;
  --bg: #07100c;
}
body[data-theme="elden-ring-tarnished-edition"] {
  /* 官方 KV 的黄金树光环（亮部采样 #e7bd6e/#e4ac5d/#f7de90），底色取 KV 的深青墨
     （#0c282a/#081611），与时之笛的森林金、旷野之息的蓝金区分。 */
  --neon: #e7bd6e; --neon-ink: #1f1504; --neon-ring: #e7bd6e40; --neon-soft: #e7bd6e1c;
  --bg: #061211;
}
body[data-theme="pokemon-pokopia"] {
  /* 官方主视觉的嫩叶绿，呼应 Pokopia 的建造与自然主题。 */
  --neon: #b7ef5d; --neon-ink: #182100; --neon-ring: #b7ef5d40; --neon-soft: #b7ef5d1c;
  --bg: #0b1108;
}

* { box-sizing: border-box; }
body[data-theme="switch-sports-resort"] {
  --neon: #60ccf4; --neon-ink: #062135; --neon-ring: #60ccf440; --neon-soft: #60ccf41c;
  --bg: #07111b;
}
body[data-theme="switch-sports-resort"] .game {
  text-wrap: balance; word-break: keep-all; overflow-wrap: normal;
}
html { scroll-padding-top: 1rem; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}
button, a, input, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid var(--neon);
  outline-offset: 3px;
}
.wrap { max-width: 36rem; margin: 0 auto; padding: 0 1rem 3rem; }

/* ---------------------------------------------------------------- 舞台

   主视觉满幅出血，标题块紧贴在它下面。

   ⚠️ **主视觉一个像素都不许裁。** 初版在这里切了个斜角（clip-path 86%），
   在 mock 里很好看，一放到三张真实主视觉上就露馅：斯普拉遁和塞尔达的官方
   logo 都压在画面右下角，斜角正好把 logo 底边连同「Breath of the Wild」
   那行字一起削掉。这些是官方主视觉，不是我们的装饰素材。
   「野」由贴纸标签、超大字重标题、霓虹描边去做——它们都不动图。 */
.stage { position: relative; margin: 0 -1rem; }
.hero-art { position: relative; background: #000; }
.hero-art img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
/* 顶部压一层渐变，让白色品牌字在任何一张主视觉上都读得出来 */
.hero-art::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 42%;
  background: linear-gradient(#00000089, #0000); pointer-events: none;
}
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1rem;
}
/* 有主视觉时品牌条压在图上；没有主视觉（默认 shiwan 主题）时它就是普通一行。 */
.stage:not(.stage--bare) .site-header {
  position: absolute; inset: 0 0 auto 0; z-index: 2;
  padding-top: max(.85rem, env(safe-area-inset-top));
}
.stage--bare .site-header { padding-top: max(1.1rem, env(safe-area-inset-top)); }
.brand { display: flex; align-items: center; gap: .65rem; }
.brand-name {
  display: block; font-size: 1.02rem; font-weight: 900; line-height: 1.3;
  letter-spacing: -.01em; color: #fff;
}
.brand-motto { display: block; font-size: .72rem; margin-top: .12rem; color: #ffffffb0; }
.stage:not(.stage--bare) .brand-name,
.stage:not(.stage--bare) .brand-motto { text-shadow: 0 1px 6px #000a; }
.stage--bare .brand-motto { color: var(--muted); }
.header-label {
  padding: .26rem .62rem; border-radius: 99px;
  background: var(--neon); color: var(--neon-ink);
  font-size: .72rem; font-weight: 900; letter-spacing: .02em; white-space: nowrap;
}

.stage-cap { position: relative; z-index: 3; padding: 0 1rem .2rem; }
.stage:not(.stage--bare) .stage-cap { margin-top: .85rem; }
/* 贴纸式机型标签：轻微旋转 + 硬投影（不带模糊），是这页"野"的来源之一 */
.eyebrow {
  display: inline-block; margin: 0 0 .5rem; padding: .26rem .58rem; border-radius: 3px;
  background: var(--neon); color: var(--neon-ink);
  font-size: .64rem; font-weight: 900; letter-spacing: .1em;
  transform: rotate(-2.2deg); box-shadow: 3px 3px 0 #00000059;
}
.game {
  margin: 0; color: #fff;
  font-size: clamp(2rem, 9.2vw, 2.5rem); font-weight: 900;
  letter-spacing: -.045em; line-height: 1.08;
  /* 「塞尔达传说 旷野之息 Nintendo Switch 2 Edition（含扩充票 DLC）」
     这种长名字会占四行，balance 让几行长短均匀一点 */
  text-wrap: balance;
}
.game::after {
  content: ""; display: block; width: 2.6rem; height: 5px; margin-top: .6rem;
  border-radius: 99px; background: var(--neon);
}

/* ---------------------------------------------------------------- 卡片 */
.card {
  margin-bottom: .9rem; padding: 1.05rem 1.2rem;
  border: 1px solid var(--line); border-radius: 16px; background: var(--card);
  scroll-margin-top: 1rem;
}
.order-card { margin-top: .95rem; }
.card h2 {
  display: flex; align-items: center; gap: .6rem;
  font-size: 1.02rem; font-weight: 900; letter-spacing: .01em; color: #fff;
  margin: 0 0 .8rem;
}
.card h2::before {
  content: ""; width: 6px; height: 1.15em; border-radius: 2px;
  background: var(--neon); flex: 0 0 auto;
}
/* 动作卡（现在就该做这件事的那一张）顶一条霓虹内描边 */
.card--action { box-shadow: inset 0 3px 0 var(--neon); }

.meta { color: var(--muted); font-size: .83rem; margin: 0 0 .9rem; }
.kv {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  align-items: start; gap: .7rem; padding: .62rem 0;
  border-bottom: 1px solid #1f262b; font-size: .9rem;
}
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--muted); }
.kv .v {
  min-width: 0; font-weight: 700; text-align: right;
  overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
}
.kv--time { grid-template-columns: auto minmax(0, 1fr); }
.kv--time .k { font-size: .8rem; white-space: nowrap; }

.pill {
  display: inline-block; padding: .26rem .7rem; border: 1px solid var(--line);
  border-radius: 99px; font-size: .75rem; font-weight: 800;
}
.pill.ok { color: var(--neon-ink); background: var(--ok); border-color: var(--ok); }
.pill.warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
.pill.review { color: var(--review); background: var(--review-bg); border-color: var(--review-line); }

.quick-nav { display: flex; gap: .5rem; margin: 0 0 .9rem; }
.quick-nav a {
  display: flex; flex: 1; align-items: center; justify-content: center; min-height: 46px;
  border: 0; border-radius: 8px; background: #171c20; color: var(--neon);
  text-decoration: none; font-size: .85rem; font-weight: 800; letter-spacing: .02em;
}
.quick-nav a:hover { background: #1d2429; }

/* ---------------------------------------------------------------- 按钮 */
button, .btn, .pay-link {
  min-height: 56px; padding: .7rem 1rem;
  border: 1px solid var(--btn-line); border-radius: 12px;
  font: inherit; font-size: 1.04rem; font-weight: 800;
  color: var(--ink); background: var(--btn); cursor: pointer;
}
/* 硬边偏移阴影（不带模糊）——街机／贴纸的质感，也是一处"野" */
button.primary, .btn.primary, .pay-link {
  background: var(--neon); border-color: var(--neon); color: var(--neon-ink); font-weight: 900;
  box-shadow: 4px 4px 0 #00000070;
}
button.primary:hover, .btn.primary:hover, .pay-link:hover { filter: brightness(1.07); }
button:active, .pay-link:active { transform: translate(1px, 1px); }
button.primary:active, .btn.primary:active, .pay-link:active { box-shadow: 3px 3px 0 #00000070; }
form.htmx-request button { cursor: wait; opacity: .72; }
/* 请求在途时的即时反馈。慢网络下第一次响应可能要几秒，只把按钮变淡在手机上
   几乎看不出来，租客会以为没点上而连点。文字换成 data-busy 并带转圈；
   重复点击由模板里的 hx-disabled-elt 挡住。
   .is-busy 给不走 htmx 的普通表单用（领取页）。 */
form:is(.htmx-request, .is-busy) button[type="submit"] { pointer-events: none; }
form:is(.htmx-request, .is-busy) button[data-busy] { font-size: 0; }
form:is(.htmx-request, .is-busy) button[data-busy]::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 1.05rem; height: 1.05rem; margin-right: .55rem;
  border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: shiwan-spin .8s linear infinite;
}
form:is(.htmx-request, .is-busy) button[data-busy]::after {
  content: attr(data-busy); vertical-align: middle; font-size: 1.04rem;
}
@keyframes shiwan-spin { to { transform: rotate(360deg); } }

/* 等待动画放在轮询片段**外面**：片段每几秒整段替换一次，动画放在里面会跟着
   重新起跳，看起来像卡顿。只要相邻的片段处于等待态（含 .job，或正在倒计时刷新的账密兜底说明）就显示。

   画面是一条路，一只百变怪沿着路从左挪到右，本身就是滑动块
   （2026-10-10 用户要求：要沿着一条路走、像滑动块，不要在空白背景上飘；
   在被告知角色形象的版权风险后仍明确指定「要飘飘球，或者百变怪」，
   看过飘飘球后要求「放大一点，再改成百变怪试试」）。
   图形是本仓库自绘的内联 SVG，不是官方素材文件。
   横向移动用 left，压扁弹起用 transform，两者互不覆盖。 */
.waitbar { display: none; }
.waitbar:has(+ * :is(.job, [data-fallback-refresh])) {
  display: block; position: relative; overflow: hidden;
  height: 66px; margin: .1rem 0 .7rem;
  background: linear-gradient(var(--line), var(--line)) left bottom 5px / 100% 4px no-repeat;
}
.waitbar:has(+ * :is(.job, [data-fallback-refresh]))::before {
  content: ""; position: absolute; left: -64px; bottom: 7px; width: 64px; height: 50px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 44'%3E%3Cpath d='M9 41C2 41 3 31 9 28C7 23 11 18 15 21C16 11 24 5 30 7C38 6 43 13 42 21C46 17 52 22 48 28C54 31 55 41 48 41Z' fill='%23c9a3e3' stroke='%239a70c2' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M13 36c4 2 9 2.5 14 2.5' fill='none' stroke='%23b68bd6' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='23' cy='19.5' r='1.5' fill='%232a2230'/%3E%3Ccircle cx='34.5' cy='19.5' r='1.5' fill='%232a2230'/%3E%3Cpath d='M21.5 25.5Q28.7 28 36 25.5' fill='none' stroke='%232a2230' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") center bottom / contain no-repeat;
  transform-origin: 50% 100%;
  animation: shiwan-drift 6s linear infinite, shiwan-squish .55s ease-in-out infinite alternate;
}
@keyframes shiwan-drift { from { left: -64px; } to { left: calc(100% + 8px); } }
/* 一下一下往前挪：压扁、弹起 */
@keyframes shiwan-squish {
  from { transform: scale(1.07, .9); }
  to   { transform: scale(.95, 1.06); }
}
@media (prefers-reduced-motion: reduce) {
  form:is(.htmx-request, .is-busy) button[data-busy]::before { animation-duration: 2.4s; }
  .waitbar:has(+ * :is(.job, [data-fallback-refresh]))::before { animation: none; left: calc(50% - 32px); }
}

button.block { display: block; width: 100%; }
button.ghost { background: var(--btn); }
a.btn { display: block; text-align: center; text-decoration: none; }
.pay-link {
  display: block; margin-top: .8rem; text-align: center; text-decoration: none;
}
.row { display: flex; gap: .5rem; flex-wrap: wrap; }
.row > * { flex: 1 1 auto; }


/* ---------------------------------------------------- Access code 输入框

   这个框以前没有任何 input[type="text"] 规则，整个掉回浏览器默认的
   13.3px Arial，还借用了文件上传的虚线框。但它和 .code-value 是同一次
   「电视 ↔ 手机」抄写的两头：那边是读出来的 5 位数字，这边是敲进去的
   8 位字母——后者更难，却反而更小。两头必须同样大。

   字号还有一条硬约束：**低于 16px，iOS Safari 一聚焦就把整页放大**，
   租客正一手手柄一手手机地抄，页面在这时候跳是最糟的。 */
.codefield { display: block; margin: .9rem 0 .7rem; }
.codefield-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  margin-bottom: .5rem; color: #fff; font-size: .8rem; font-weight: 900; letter-spacing: .08em;
}
.codefield-label em {
  font-style: normal; font-weight: 400; letter-spacing: 0;
  font-size: .76rem; color: var(--muted);
}
.codefield-input {
  display: block; width: 100%; min-height: 4.7rem; padding: .55rem .4rem;
  border: 2px solid #2f383e; border-radius: 12px;
  background: var(--field); color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(1.7rem, 8.4vw, 2.25rem); font-weight: 700;
  /* text-indent 抵掉末位字距造成的偏心，否则整串看着偏左 */
  letter-spacing: .2em; text-indent: .2em;
  text-align: center; text-transform: uppercase;
}
.codefield-input::placeholder { color: #465056; font-weight: 500; }
.codefield-input:focus, .codefield-input:focus-visible {
  outline: none; border-color: var(--neon); box-shadow: 0 0 0 4px var(--neon-ring);
}

/* ---------------------------------------------------------------- 文本块 */
.rules { margin: .5rem 0 1rem; padding-left: 1.2rem; color: #b5bec4; font-size: .9rem; }
.rules li { margin: .45rem 0; }
.renewal-steps { margin: .8rem 0 0; padding-left: 1.25rem; color: #b5bec4; font-size: .86rem; }
.renewal-steps li { margin: .4rem 0; }
.lede { margin: .2rem 0 .6rem; font-weight: 700; color: #fff; }
.lede--bad { color: var(--danger); }
.muted { color: var(--muted); font-size: .82rem; line-height: 1.75; margin: .75rem 0; }
.muted--warn { color: var(--warn); }
/* 「宽限期」高亮：用 --ok（不计费是好消息），深浅两套主题各自定义了可读的 --ok。 */
.grace-hl { color: var(--ok); font-weight: 700; }
.card > .muted:last-child { margin-bottom: 0; }
.notice, .warning, .error {
  padding: .8rem .9rem; border-radius: 12px; font-size: .88rem;
}
.notice { background: #171d21; border: 1px solid var(--line); color: #c4ced4; }
.notice--theme { background: var(--neon-soft); border-color: var(--neon); color: #edf1f3; }
.warning { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn); }
.error {
  background: var(--danger-bg); border: 1px solid var(--danger-line);
  color: var(--danger); margin: .9rem 0;
}
.job { color: #b5bec4; }

/* ---------------------------------------------------------------- 凭据 */
.secret {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #0b0f11; border: 1px solid var(--line); border-radius: 7px;
  padding: .3rem .5rem; overflow-wrap: anywhere;
}
.credentials .kv { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.password-value { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: .4rem; }
#pw-toggle { min-height: 44px; padding: .35rem .7rem; font-size: .85rem; color: var(--neon); }

/* 5 位确认码：暗底上让它发光。刻意不做复制按钮——租客拿着手机、
   用手柄往主机里一位一位敲，剪贴板在手机上，复制出来没地方粘。 */
.code-value {
  margin: .5rem 0; color: var(--neon);
  font-size: clamp(2rem, 9vw, 3rem); line-height: 1.25; letter-spacing: .2em;
  font-weight: 900; font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- 教程 */
.account-tutorial {
  margin: 0 0 .8rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card-2); overflow: hidden;
}
.account-tutorial summary {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  min-height: 48px; padding: .65rem .85rem; color: var(--neon);
  cursor: pointer; font-size: .88rem; font-weight: 800; list-style: none;
}
.account-tutorial summary::-webkit-details-marker { display: none; }
.account-tutorial summary::after { content: "展开"; font-size: .75rem; font-weight: 500; color: var(--muted); }
.account-tutorial[open] summary::after { content: "收起"; }
.account-tutorial-body { padding: 0 .7rem .7rem; }
/* 教程图本身是浅底的实机截图，不做任何滤镜——它要准。只给一圈收边，
   免得白底直接贴在暗卡上晃眼。 */
.account-tutorial-body img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  border: 1px solid #2b343a; border-radius: 9px; background: #fff;
}
.account-tutorial-body .muted { margin: .55rem .15rem 0; }
.dns-help { margin: .9rem 0 0; }
.dns-steps { margin: .1rem 0 .75rem; padding-left: 1.25rem; color: #b5bec4; font-size: .84rem; }
.dns-steps li { margin: .35rem 0; }
.dns-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.dns-pairs > div {
  min-width: 0; padding: .55rem .65rem; border: 1px solid var(--line);
  border-radius: 9px; background: #0f1417; font-size: .77rem;
  font-variant-numeric: tabular-nums;
}
.dns-pairs span { display: block; overflow-wrap: anywhere; }
.dns-pairs span + span { margin-top: .15rem; color: var(--muted); }
.login-guide { margin: 0; }
.login-guide .account-tutorial-body { padding: .15rem .85rem 1rem; }
.login-guide h2 { margin: .65rem .15rem .35rem; font-size: 1.02rem; color: #fff; }
.login-guide-steps { list-style: none; counter-reset: login-step; margin: 1rem 0; padding: 0; }
.login-guide-steps li {
  counter-increment: login-step; margin: 0 0 1.15rem;
  padding-bottom: 1.15rem; border-bottom: 1px solid var(--line);
}
.login-guide-steps h3 {
  display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .35rem;
  font-size: .92rem; line-height: 1.45; color: #fff;
}
.login-guide-steps h3::before {
  content: counter(login-step); flex: 0 0 auto;
  color: var(--neon); font-size: 1.1rem; font-weight: 900;
}
.login-guide-steps p { margin: .25rem 0 .65rem; color: #b5bec4; font-size: .84rem; line-height: 1.65; }
.login-guide-dns { margin-top: 1.25rem; }
/* 自助领取步骤的实拍图比例各不相同（4:3、约 16:9），只收宽度，不强制比例。 */
.claim-steps > .login-guide-steps { counter-reset: login-step 7; }
.claim-steps img {
  display: block; width: 100%; height: auto;
  border: 1px solid #2b343a; border-radius: 9px;
}
.claim-steps > h3 { margin: 1rem 0 .35rem; font-size: .92rem; color: #fff; }
.login-guide-dns h2 { margin-bottom: .8rem; }

/* ---------------------------------------------------------------- 钱 */
.money-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem;
  padding: .7rem 0 1rem; border-bottom: 1px solid var(--line);
}
.money { padding: .25rem .4rem; border-right: 1px solid var(--line); }
.money:first-child { padding-left: 0; }
.money:last-child { border-right: 0; }
.money span { display: block; font-size: .69rem; color: var(--muted); }
.money strong {
  display: block; color: #fff; font-size: clamp(1.1rem, 4.4vw, 1.5rem); font-weight: 900;
  font-variant-numeric: tabular-nums; line-height: 1.6; overflow-wrap: anywhere;
}
/* 「闲鱼平台托管」是一句话不是一个数，跟金额同字号只会换行换得难看 */
.money strong.is-text { font-size: 1rem; font-weight: 700; line-height: 1.45; }
.policy-details { margin-top: .65rem; }
.policy-details summary { min-height: 44px; padding: .6rem 0; cursor: pointer; font-size: .84rem; color: #b5bec4; }
.policy-details[open] summary { margin-bottom: .4rem; }

/* ---------------------------------------------------------------- 上传 */
.file {
  display: block; margin: .75rem 0; padding: .85rem;
  background: #0f1417; border: 1px dashed #39444a; border-radius: 12px;
}
.file label > span { display: block; font-size: .88rem; font-weight: 700; margin-bottom: .5rem; color: #fff; }
input[type="file"] { display: block; max-width: 100%; min-height: 44px; font-size: .8rem; color: var(--muted); }
input[type="file"]::file-selector-button {
  padding: .55rem .75rem; margin-right: .5rem; border: 1px solid var(--neon);
  border-radius: 8px; color: var(--neon); background: transparent; font: inherit; font-weight: 700;
}
/* 归还上传框：左边选文件，右边一张示例小图；点开后示例占满整行。
   示意图是内联 SVG，浅底画的主机界面，跟实拍教程图一样只收一圈边。 */
.proof-slot {
  display: grid; grid-template-columns: minmax(0, 1fr) 40%; gap: .75rem; align-items: center;
}
.proof-slot > label { min-width: 0; }
.proof-sample summary { display: block; list-style: none; cursor: zoom-in; }
.proof-sample summary::-webkit-details-marker { display: none; }
.proof-sample[open] { grid-column: 1 / -1; grid-row: 2; }
.proof-sample[open] summary { cursor: zoom-out; }
.proof-sample small { display: block; margin-top: .25rem; text-align: center; font-size: .72rem; color: var(--muted); }
.proof-sample small::after { content: " · 点开看大图"; }
.proof-sample[open] small::after { content: " · 点击收起"; }
.return-shot {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  border: 1px solid #2b343a; border-radius: 9px;
}
.return-cancel { margin-top: .75rem; }

.claim-card > p:first-of-type { margin-top: 0; color: #c4ced4; }
.claim-card .notice { margin: 1rem 0; }

footer { text-align: center; padding: 1rem .5rem 0; color: var(--muted); font-size: .76rem; }
footer strong { display: block; color: #fff; font-size: .85rem; margin-bottom: .3rem; }
footer .rules-link { display: block; margin-top: .6rem; padding: .4rem; color: var(--muted); text-decoration: underline; }

/* 服务规则页：纯文字长页，不带游戏主题。 */
.rules-wrap .site-header { position: static; padding: 1rem 0; }
.rules h1 { font-size: 1.2rem; line-height: 1.4; margin: 0 0 .4rem; }
.rules h2 { font-size: 1rem; margin: 1.6rem 0 .5rem; color: #fff; }
.rules p, .rules li { font-size: .9rem; line-height: 1.75; color: #c4ced4; }
.rules ol, .rules ul { padding-left: 1.3rem; margin: .4rem 0; }
.rules li { margin-bottom: .35rem; }

@media (max-width: 380px) {
  .wrap { padding: 0 .75rem 2rem; }
  .card { padding: .95rem 1rem; }
  .site-header, .stage-cap { padding-left: .75rem; padding-right: .75rem; }
  .stage { margin: 0 -.75rem; }
  .header-label { font-size: .68rem; }
  .kv { font-size: .84rem; gap: .55rem; }
  .credentials .kv { grid-template-columns: 1fr; gap: .25rem; }
  .credentials .kv .v { text-align: left; justify-content: flex-start; }
  .dns-pairs { grid-template-columns: 1fr; }
}

/* 斜切是装饰，不该妨碍任何人。关掉动效偏好时也一并收掉贴纸的旋转。 */
@media (prefers-reduced-motion: reduce) {
  .eyebrow { transform: none; }
}

/* 双人成行：2026-10-16 审核通过的暖黄主题与逐张图文教程。 */

body[data-theme="it-takes-two-claim"] h1.game{font-size:clamp(28px,7vw,40px)}
body[data-theme="it-takes-two-claim"]{--neon:#ffd05b;--neon-ink:#30200a;--neon-ring:#ffd05b40;--neon-soft:#ffd05b1c;--bg:#100e0a}
.itt-tutorial section{border-top:1px solid var(--line);padding:20px 0;margin-top:16px}.itt-tutorial .stephead{display:flex;align-items:center;gap:10px}.itt-tutorial .num{color:var(--neon);font-size:23px}.itt-tutorial h2{font-size:18px}.itt-tutorial p{font-size:15px;line-height:1.8}.itt-tutorial figure{margin:14px 0}.itt-tutorial .shot{position:relative}.itt-tutorial img{display:block;width:100%;height:auto;border-radius:10px}.itt-tutorial .mark{position:absolute;border:2px solid #ffda71;border-radius:6px;box-shadow:0 0 0 1px #20282088}.itt-tutorial figcaption{font-size:12px;color:var(--muted);margin-top:7px}.itt-tutorial aside{background:var(--neon-soft);border-left:3px solid var(--neon);padding:12px;font-size:14px}.itt-tutorial strong{color:var(--neon)}