/* ============================================================
   云卡商城 · 样式模块 08/11 —— 08-account.css
   ------------------------------------------------------------
   职责：个人中心的侧栏布局
   涵盖：§26

   ⚠️ 加载顺序即层叠顺序，请勿调整 <link> 的先后。
      本文件由 style.css 按分节边界切出，规则未做任何重排。
   ============================================================ */

/* ============================================================
   26 · 侧栏布局（个人中心）
   ============================================================ */
.side-layout {
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
}
.side-menu { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
.side-menu .grp { margin-bottom: var(--sp-4); }
.side-menu .grp .t {
  padding: 0 var(--sp-3) var(--sp-2);
  color: var(--text-3);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.side-menu a {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: 2px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background var(--tr), color var(--tr);
}
.side-menu a:hover { background: var(--surface-2); color: var(--text); }
.side-menu a.on {
  background: var(--brand-soft);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--brand-line);
}
.side-menu a .ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--text-3);
  transition: color var(--tr);
}
.side-menu a:hover .ico { color: var(--text-2); }
.side-menu a.on .ico { color: var(--brand); }
.side-menu a .cnt {  margin-left: auto;
  padding: 0 var(--sp-1h);
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  line-height: 1.7;
}

.user-card .name { color: var(--text); font-size: var(--fs-base); font-weight: var(--fw-semi); }
.user-card .mail { color: var(--text-3); font-size: var(--fs-xs); }

/* Supplemental account pages fill the content column, rather than shrink to
   their intrinsic width through the shared workspace's automatic margins. */
.account-operations .side-layout > .ox-workspace {
  width: 100%; min-width: 0; max-width: none; margin: 0; align-self: start;
}
.account-operations .side-layout > .side-menu { min-width: 0; }
.account-operations .ox-page-intro {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin: 0 0 24px; padding: 0;
}
.account-operations .ox-page-intro > div { min-width: 0; }
.account-operations .ox-page-intro h1 { margin: 0 0 8px; font-size: 26px; line-height: 1.4; letter-spacing: 0; }
.account-operations .ox-page-intro p { margin: 0; font-size: 14px; line-height: 1.7; }
.account-operations .ox-page-intro > .btn { flex: none; }
.account-operations :is(.ox-panel,.ox-case,.ox-favorite,.ox-coupon) {
  min-width: 0; border-radius: 10px; padding: 24px; overflow-wrap: anywhere;
}
.account-operations :is(.ox-panel,.ox-case) > p { max-width: 70ch; }
.account-operations .btn { min-height: 44px; }
.account-operations .ox-primary { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; }
.account-operations .ox-primary:hover { background: var(--brand) !important; filter: brightness(.94); }
.account-operations .ox-empty {
  grid-column: 1 / -1; min-height: 240px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface); display: flex;
  flex-direction: column; justify-content: center; align-items: center; padding: 32px 24px;
}
.account-operations .ox-empty p { max-width: 40ch; line-height: 1.8; }
.account-operations .account-case-list { display: grid; gap: 20px; }
.account-operations .account-case-list .ox-case { margin: 0; }
.account-operations .ox-case-head { border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 16px; }
.account-operations .ox-case-head h3 { margin: 4px 0 0; font-size: 18px; }
.account-operations .ox-case > a { display: inline-block; color: var(--brand); font-size: 13px; line-height: 1.7; }
.account-operations .ox-timeline { margin: 20px 0; padding-left: 20px; }
.account-operations .ox-timeline p { margin: 6px 0 0; max-width: 70ch; white-space: pre-line; }
.account-operations .ox-timeline > div { padding-bottom: 18px; }
.account-operations .ox-timeline > div:last-child { padding-bottom: 0; }
.account-operations .ox-actions { margin-top: 0; }
.account-operations .ox-favorite-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.account-operations .ox-favorite { display: grid; grid-template-columns: 80px minmax(0,1fr); gap: 18px; align-items: start; }
.account-operations .ox-favorite-art { width: 80px; height: 80px; border-radius: 10px; }
.account-operations .account-favorite-info { min-width: 0; }
.account-operations .account-favorite-info h3 { margin: 0 0 6px; font-size: 16px; }
.account-operations .account-favorite-info p { margin: 0 0 10px; line-height: 1.6; }
.account-operations .account-favorite-price { font-size: 20px; font-weight: 650; color: var(--gold); }
.account-operations .account-favorite-price small { font-size: 12px; font-weight: 400; color: var(--text-3); }
.account-operations .account-favorite-foot {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line);
}
.account-operations .account-favorite-foot .checkbox { font-size: 12px; min-height: 44px; }
.account-operations .account-favorite-foot > div { display: flex; gap: 8px; }
.account-operations .ox-inline-form { align-items: center; }
.account-operations .ox-inline-form label { font-size: 14px; flex: none; }
.account-operations .ox-inline-form .input { min-width: 0; max-width: 440px; height: 44px; }
.account-operations .ox-coupon-grid { gap: 20px; }
.account-operations .ox-coupon { padding: 0; margin: 0; }
.account-operations .ox-coupon::after { display: none; }
.account-operations .account-coupon-main { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 20px; padding: 24px; align-items: center; }
.account-operations .account-coupon-value { min-width: 80px; text-align: center; padding-right: 20px; border-right: 1px dashed var(--line); }
.account-operations .account-coupon-value strong { font-size: 32px; line-height: 1.2; margin: 0 0 8px; color: var(--brand); }
.account-operations .account-coupon-value > span { font-size: 12px; color: var(--text-3); }
.account-operations .account-coupon-info h3 { margin: 0 0 8px; font-size: 16px; }
.account-operations .account-coupon-info p { margin: 4px 0; font-size: 13px; line-height: 1.7; }
.account-operations .account-coupon-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; align-items: center; padding: 14px 24px; border-top: 1px solid var(--line); background: var(--surface-2); }
@media (max-width: 1100px) {
  .account-operations .ox-favorite-grid,.account-operations .ox-coupon-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 640px) {
  .account-operations .ox-page-intro { gap: 12px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 20px; }
  .account-operations .ox-page-intro h1 { font-size: 22px; }
  .account-operations :is(.ox-panel,.ox-case,.ox-favorite) { padding: 20px 16px; }
  .account-operations .ox-case-head { gap: 12px; }
  .account-operations .ox-favorite { grid-template-columns: 64px minmax(0,1fr); gap: 14px; }
  .account-operations .ox-favorite-art { width: 64px; height: 64px; }
  .account-operations .account-favorite-foot > div { flex: 1 1 100%; }
  .account-operations .account-favorite-foot > div .btn { flex: 1; }
  .account-operations .ox-inline-form { flex-wrap: wrap; gap: 10px; }
  .account-operations .ox-inline-form label { flex-basis: 100%; }
  .account-operations .ox-inline-form .input { flex-basis: 100%; max-width: none; }
  .account-operations .ox-inline-form .btn { width: 100%; }
  .account-operations .account-coupon-main { padding: 20px 16px; gap: 14px; }
  .account-operations .account-coupon-value { min-width: 64px; padding-right: 14px; }
  .account-operations .account-coupon-value strong { font-size: 28px; }
  .account-operations .account-coupon-foot { padding: 14px 16px; }
}

/* ============================================================
   站内钱包（.wallet-* / .topup-*）
   ------------------------------------------------------------
   个人中心与后台钱包页共用。余额是「钱」，展示上要显眼、不能含糊。
   ============================================================ */
.wallet-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-5);
}
.wallet-amt {
  margin-top: var(--sp-1h);
  color: var(--gold-fg);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: 1.1;
}
.wallet-sums { display: flex; gap: var(--sp-8); }
.wallet-sums > div { text-align: right; }

/* 待确认充值：整块给个提示底色，让用户一眼看到「还差我一步」 */
.wallet-pend {
  padding: var(--sp-4);
  border: 1px solid var(--warn-line);
  border-radius: var(--r-md);
  background: var(--warn-bg);
}
.topup-quick { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* 「或」分隔线：账号登录与第三方登录之间。
   用伪元素画两条横线，线长自适应 —— 比写死宽度在窄屏上更稳。 */
.auth-or {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-4) 0;
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.auth-or::before,
.auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* 第三方登录按钮里的品牌瓦片：bt-xs 是 32px，塞进按钮里太大，
   压到 22px 并收紧圆角。谷歌走 bt-full（透明底、全彩四色），
   微信走品牌绿底 + 白 logo，两种形态在按钮里都成立。 */
.btn-third .brand-tile {
  width: 22px;
  height: 22px;
  border-radius: 6px;
}
/* 全彩瓦片在按钮里贴边会顶到文字，微调视觉重心 */
.btn-third .brand-tile.bt-full { background: var(--surface-3); }

/* 账户导航保持相同的图标基线与选中层级。 */
.side-menu a { min-height: var(--ctl-h); gap: var(--sp-3); }
.side-menu a.on { color: var(--brand-fg); }
.user-card .mail { margin-top: var(--sp-1); overflow-wrap: anywhere; }
.wallet-sums { flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); }

/* The account initial is a real avatar surface, not white text on white. */
.account-avatar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--brand-bg); color: var(--brand-fg); border: 1px solid var(--brand-line); font-size: var(--fs-lg); font-weight: var(--fw-bold); }

/* Wallet summary is visually distinct from the editable recharge form. */
.wallet-balance-card { border-color: var(--brand-line); background: var(--brand-bg); border-radius: var(--r-xl); }
.wallet-balance-card .card-body { padding: var(--sp-8); }
.wallet-balance-card .wallet-amt { color: var(--text); margin-top: var(--sp-3); font-size: var(--fs-4xl); letter-spacing: -.5px; }
.wallet-balance-card .wallet-sums { padding-top: var(--sp-4); border-top: 1px solid var(--brand-line); }
.wallet-pend { padding: var(--sp-5); border-radius: var(--r-lg); }

.order-revise-form > section { margin-top:24px;padding-top:20px;border-top:1px solid var(--line); }
.order-revise-form > section > h4 { font-size:15px;line-height:1.5;margin:0 0 16px; }
.order-revise-form .rf-block { margin-top:0; }
.order-revise-form .rf-head .t { display:none; }
.order-revise-form .rf-head .s { margin-top:0; }

/* A dedicated touch target keeps password reveal usable on mobile Safari. */
.auth-password{position:relative}
.auth-password .input{padding-right:52px}
.auth-password-toggle{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:var(--r-md);background:transparent;color:var(--muted,var(--text));cursor:pointer;touch-action:manipulation}
.auth-password-toggle[aria-pressed="true"]{color:var(--brand-fg)}
.auth-password-toggle[aria-pressed="true"]::after{content:"";position:absolute;width:22px;height:2px;background:currentColor;transform:rotate(-45deg)}
.auth-password-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:-3px}
.auth-password input::-ms-reveal{display:none}

/* Shared password reveal controls, including dialogs and independent consoles. */
.password-input{position:relative;min-width:0}
.password-input>input{width:100%;padding-right:52px}
.password-input>.password-toggle{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:44px;min-width:44px;height:44px;min-height:44px;padding:0;display:grid;place-items:center;border:0;border-radius:var(--r-md,6px);background:transparent;color:var(--gs-accent,var(--text-3,var(--mk-muted,#667085)));cursor:pointer;touch-action:manipulation}
.password-input>.password-toggle.gs-password-toggle{top:50%;right:2px;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;background:transparent;border:0;box-shadow:none}
.password-toggle[aria-pressed="true"]{color:var(--gs-accent,var(--brand-fg,var(--mk-blue,#165dff)))}
.password-toggle[aria-pressed="true"]::after{content:"";position:absolute;width:22px;height:2px;background:currentColor;transform:rotate(-45deg)}
.password-toggle:focus-visible{outline:2px solid var(--gs-accent,var(--brand,var(--mk-blue,#165dff)));outline-offset:-3px}
.password-toggle:disabled{opacity:.5;cursor:default}
.password-input>input::-ms-reveal{display:none}

/* Storefront-only authentication. The approved game scene uses a fixed light palette. */
.storefront-auth.auth-game.auth-wrap {
  --bg:#f4fbff; --surface:#fff; --surface-2:#f6f9ff; --inset:#fff;
  --line:#d3dcea; --line-2:#cbd5e5; --line-strong:#90a7c7;
  --text:#101c40; --text-2:#3b4864; --text-3:#6b7795;
  --brand:#2458ff; --brand-hover:#194bea; --brand-active:#1340d4;
  --brand-fg:#2458ff; --brand-bg:#edf2ff; --brand-line:#b9caff;
  --brand-soft:rgba(36,88,255,.08); --text-on:#fff;
  --info-fg:#556583; --info-bg:#f5f8fe; --info-line:#e1e8f3;
  --ring:0 0 0 3px rgba(36,88,255,.16);
  position:relative; isolation:isolate; overflow:hidden; width:100%; min-width:0;
  display:grid; grid-template-columns:minmax(0,1fr); place-items:center;
  min-height:max(690px,100svh); padding:24px 24px 136px;
  color-scheme:light; color:var(--text); font-family:"Microsoft YaHei UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:radial-gradient(ellipse at 0% 43%,#cbeeff 0%,transparent 46%),radial-gradient(ellipse at 104% 47%,#fff4ca 0%,transparent 36%),linear-gradient(145deg,#f5fbff,#fff 52%,#edf8ff);
}
.storefront-auth.auth-game::before { content:""; position:absolute; width:360px; height:360px; border:1px solid #51a7ff; border-radius:50%; top:-260px; right:-90px; z-index:-1; }
.auth-game .auth-scene-wrap { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.auth-game .auth-scene-wrap .game-scene { display:block; width:100%; height:100%; max-width:none; overflow:visible; }
.auth-game .auth-content { width:376px; max-width:100%; min-width:0; position:relative; z-index:1; }
.auth-game .auth-card { max-width:none; width:100%; padding:23px 32px 21px; border:0; border-radius:25px; background:rgba(255,255,255,.98); box-shadow:0 20px 65px -27px rgba(56,112,181,.24); }
.auth-game .auth-head { margin:0 0 16px; text-align:center; }
.auth-game .auth-cloud { display:block; width:58px; height:50px; margin:0 auto 8px; }
.auth-game .auth-cloud svg { width:100%; height:100%; overflow:visible; }
.auth-game .auth-head h1 { margin:0; font-size:28px; line-height:1.35; font-weight:700; letter-spacing:1px; color:var(--text); }
.auth-game .auth-head p { margin:7px 0 0; color:var(--text-3); font-size:14px; line-height:1.6; letter-spacing:1px; }
.storefront-auth.auth-game .auth-tabs { display:flex; justify-content:center; gap:30px; width:226px; max-width:100%; margin:0 auto 16px; padding:0; border:0; border-bottom:1px solid #e4eaf3; border-radius:0; background:transparent; }
.storefront-auth.auth-game .auth-tabs a { height:44px; padding:8px 18px 10px; font-size:15px; line-height:1.5; border-radius:0; border-bottom:2px solid transparent; margin-bottom:-1px; color:#63718e; background:transparent; }
.storefront-auth.auth-game .auth-tabs a:hover { color:var(--brand); background:transparent; }
.storefront-auth.auth-game .auth-tabs a.on { color:var(--brand); border-bottom-color:var(--brand); background:transparent; box-shadow:none; }
.auth-game .auth-card > .card { background:transparent; border:0; box-shadow:none; border-radius:0; overflow:visible; }
.auth-game .auth-card > .card > .card-body { padding:0; }
.auth-game .field { margin:0 0 13px; }
.auth-game .field > label { display:block; margin:0 0 7px; font-size:13px; line-height:1.5; font-weight:500; color:var(--text); }
.auth-game .input { width:100%; min-width:0; height:45px; padding:0 13px; border:1px solid #ced7e6; border-radius:8px; background:#fff; color:var(--text); font-size:14px; line-height:1.5; box-shadow:0 1px 1px rgba(30,55,100,.02); }
.auth-game .input::placeholder { color:#8a97b0; opacity:1; }
.storefront-auth.auth-game .input:focus { background:#fff; border-color:var(--brand); box-shadow:var(--ring); }
.auth-game .input:-webkit-autofill { -webkit-text-fill-color:#101c40; box-shadow:0 0 0 1000px #fff inset; }
.auth-game :is(.auth-password,.password-input) > .input { padding-right:50px; }
.auth-game :is(.auth-password-toggle,.password-toggle) { color:#7785a2; width:44px; min-width:44px; height:44px; min-height:44px; background:transparent; }
.auth-game .auth-password-toggle[aria-pressed="true"],.auth-game .password-toggle[aria-pressed="true"] { color:var(--brand); }
.auth-game form > .btn-primary { margin-top:6px; width:100%; min-height:47px; border:0; border-radius:8px; background:#2458ff; color:#fff; font-size:15px; font-weight:600; letter-spacing:1px; box-shadow:0 5px 16px -10px #2458ff; }
.auth-game form > .btn-primary:hover { background:#194bea; }
.auth-game .auth-game-links { display:flex; flex-wrap:wrap; gap:8px 12px; margin-top:12px; font-size:12px; line-height:1.5; }
.auth-game .auth-game-links a { min-height:28px; display:flex; align-items:center; }
.auth-game .auth-game-links a:first-child { color:#33415e; }
.auth-game .auth-game-footer { display:flex; justify-content:center; flex-wrap:wrap; align-items:center; gap:14px; margin-top:10px; font-size:11px; line-height:1.5; color:#5e6e8b; }
.auth-game .auth-game-footer a { min-height:32px; display:flex; align-items:center; }
.auth-game .auth-game-footer > span { height:11px; border-left:1px solid #a2aec4; }
.auth-game .auth-motion-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.auth-game .auth-or { margin:16px 0; }
.auth-game .btn-third { border-color:var(--line); background:#fff; color:var(--text-2); }
.auth-google-region[hidden]{display:none!important}
.auth-game .auth-google-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:44px;padding:11px 12px;border:1px solid #747775;border-radius:8px;background:#fff;color:#1f1f1f;font-family:"Google Sans","Microsoft YaHei UI","PingFang SC",sans-serif;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;transition:background .15s,border-color .15s}
.auth-game .auth-google-button img{display:block;flex:none;width:20px;height:20px;object-fit:contain}
.auth-game .auth-google-button:disabled{opacity:1;cursor:default}
.auth-game .auth-google-button:not(:disabled):hover{background:#f8faff;border-color:#4c5262}
.auth-game .auth-google-button:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.auth-game .auth-google-status{margin:7px 0 0;text-align:center;font-size:12px;line-height:1.6;color:var(--text-3)}
.auth-game .demo-tip { margin-top:16px; padding:12px; background:#f5f8fe; border:1px solid #e1e8f3; color:#556583; font-size:12px; line-height:1.7; border-radius:8px; }
.auth-game .input-group { display:flex; min-width:0; }
.auth-game .input-group > .input { flex:1 1 0%; width:0; }
.auth-game .input-group > .btn-code { min-width:108px; min-height:45px; padding:0 12px; color:#2458ff; border-color:#ced7e6; background:#f5f8ff; font-size:12px; }
.auth-game .checkbox { align-items:flex-start; flex-wrap:wrap; gap:4px; font-size:12px; line-height:1.7; color:var(--text-2); }
.auth-game .checkbox input { flex:none; margin-top:2px; }
.auth-game .checkbox a { color:var(--brand); }
.auth-game[data-auth-page="register"] .auth-content { width:420px; }
.auth-game[data-auth-page="register"] .auth-card { padding-top:25px; }
.auth-game[data-auth-page="register"] .auth-head { margin-bottom:12px; }
.auth-game[data-auth-page="register"] .auth-cloud { width:50px; height:44px; }
.auth-game[data-auth-page="register"] .auth-head h1 { font-size:26px; }
.auth-game[data-auth-page="forgot"] .auth-content { width:400px; }
.auth-game[data-auth-page="register"],.auth-game[data-auth-page="forgot"] { padding-bottom:176px; }
.auth-game.is-paused [data-motion],.auth-game.is-offscreen [data-motion] { animation-play-state:paused!important; }
@media(max-width:600px) {
  .storefront-auth.auth-game.auth-wrap { min-height:max(800px,100svh); padding:70px 16px 156px; align-items:start; }
  .auth-game .auth-content { width:350px; }
  .auth-game .auth-card { padding:27px 25px 23px; border-radius:23px; }
  .auth-game .auth-cloud { width:62px; height:57px; margin-bottom:12px; }
  .auth-game .auth-head { margin-bottom:21px; }
  .auth-game .auth-head p { font-size:13px; }
  .storefront-auth.auth-game .auth-tabs { margin-bottom:22px; }
  .auth-game .input { height:46px; font-size:16px; }
  .auth-game .auth-game-links { font-size:11px; }
  .auth-game .auth-game-links a { min-height:36px; }
  .auth-game .auth-game-footer { margin-top:10px; }
  .auth-game .auth-game-footer a { min-height:44px; }
  .auth-game .auth-scene-wrap { top:auto; bottom:0; height:360px; }
  .auth-game[data-auth-page="register"],.auth-game[data-auth-page="forgot"] { padding-bottom:160px; }
}
@media(max-width:359px) {
  .auth-game .auth-card { padding-left:20px; padding-right:20px; }
  .auth-game .auth-game-links { gap:4px; }
  .auth-game .input-group > .btn-code { min-width:94px; padding-inline:8px; }
}
@media(prefers-reduced-motion:reduce) {
  .auth-game:not(.motion-opt-in) [data-motion] { animation:none!important; }
}

.storefront-auth.auth-game .game-scene{display:block;width:100%;height:100%;overflow:visible;pointer-events:none;isolation:isolate}
.storefront-auth.auth-game .ylm-float{animation:ylm-float var(--ylm-duration,4.4s) ease-in-out var(--ylm-delay,0s) infinite;transform-box:fill-box;transform-origin:center}
.storefront-auth.auth-game .ylm-jump-traveler{will-change:transform;pointer-events:none}
.storefront-auth.auth-game .ylm-portal-glow{animation:ylm-portal-breathe 3.8s ease-in-out -1s infinite;transform-box:fill-box;transform-origin:center}
.storefront-auth.auth-game.is-paused [data-motion]{animation-play-state:paused!important}
@keyframes ylm-float{0%,100%{transform:translateY(8px)}50%{transform:translateY(-24px)}}
@keyframes ylm-portal-breathe{0%,100%{opacity:.12;transform:scale(.92)}50%{opacity:.65;transform:scale(1.10)}}
@media(prefers-reduced-motion:reduce){.storefront-auth.auth-game:not(.motion-opt-in) [data-motion]{animation:none!important}}

.auth-policy-consent { align-items: flex-start; line-height: 1.7; font-size: 13px; margin: 12px 0; }
.auth-policy-consent[hidden] { display: none; }
.auth-policy-consent input { flex: 0 0 auto; margin-top: 4px; }
.auth-policy-consent a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
