:root,
html[data-theme='amber'] {
color-scheme: dark;
--bg: #100d0b;
--card: #211812;
--card-rgb: 33, 24, 18;
--panel: #17120e;
--line: rgba(214, 158, 98, 0.20);
--line-soft: rgba(229, 193, 140, 0.11);
--text: #f3eadf;
--muted: #b6a897;
--accent: #d99a54;
--accent2: #e5c18c;
--accent-rgb: 217, 154, 84;
--accent2-rgb: 229, 193, 140;
--ok: #7fcf9a;
--danger: #d96b76;
--danger-rgb: 217, 107, 118;
--bg-glow: rgba(202, 128, 64, 0.065);
--user-bubble: #5a3a29;
--gold: #d9a25f;
--gold2: #e6bc7a;
--on-accent: #1c1209;
--font-display: "PingFang SC","Hiragino Sans GB","MiSans","Microsoft YaHei","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
--font-body: "PingFang SC","Hiragino Sans GB","MiSans","Microsoft YaHei","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
--font-number: "SF Pro Text","DIN Alternate","Roboto Mono","PingFang SC","Hiragino Sans GB",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--font-mono: "JetBrains Mono","SF Mono","SFMono-Regular","Roboto Mono","Consolas",monospace;
--radius-card: 10px;
--radius-control: 6px;
--radius-chip: 4px;
--ease-out: cubic-bezier(.22,1,.36,1);
--ease-in-out: cubic-bezier(.65,0,.35,1);
--ease-spring: cubic-bezier(.34,1.56,.64,1);
/* 管理后台不跟随站点明暗：无论 amber（暗）还是 moon（浅），后台一律浅色。
暗色后台在密集列表下层次做不好、可读性差，浅色版稳定（2026-09-12 决策）。
这里的浅色值需与下方 html[data-theme='moon'] 那套保持一致，改要两边同步。 */
--admin-bg: #f7f7f8;
--admin-panel: #ffffff;
--admin-card: #eef0f2;
--admin-text: #1a1a1c;
--admin-muted: #6a6a72;
--admin-accent: #2c6ba8;
--admin-accent-rgb: 44,107,168;
--admin-ok: #2f7d55;
--admin-warn: #5a6b7a;
--admin-danger: #c43c3c;
--admin-line: rgba(0,0,0,.12);
--admin-line-soft: rgba(0,0,0,.06);
}
:root {
--shell-max: 1200px;
--motion-fast: .18s;
--motion-med: .28s;
}
/* 主题已收敛为 amber（暖黑）与 moon（月白）两套，见 docs/slim-down-plan.md 第 1 项 */
html[data-theme='moon'],
html[data-mode='day'] { color-scheme:light; --bg:#f4f2ee; --card:#ffffff; --card-rgb:255,255,255; --panel:#ebe8e2; --line:rgba(130,110,80,.20); --line-soft:rgba(130,110,80,.16); --text:#252525; --muted:#686057; --accent:#9e7440; --accent2:#7f5f38; --accent-rgb:158,116,64; --accent2-rgb:127,95,56; --ok:#2d7d50; --danger:#b84d5c; --danger-rgb:184,77,92; --bg-glow:rgba(158,116,64,.10); --user-bubble:#d7c29f; --gold:#9e7440; --gold2:#7f5f38; --on-accent:#ffffff; --admin-bg:#f7f7f8; --admin-panel:#ffffff; --admin-card:#eef0f2; --admin-text:#1a1a1c; --admin-muted:#6a6a72; --admin-accent:#2c6ba8; --admin-accent-rgb:44,107,168; --admin-ok:#2f7d55; --admin-warn:#5a6b7a; --admin-danger:#c43c3c; --admin-line:rgba(0,0,0,.12); --admin-line-soft:rgba(0,0,0,.06); }
* { box-sizing: border-box; }
body { margin:0; min-height:100dvh; font-family:var(--font-body); background:var(--bg); color:var(--text); transition:background .35s ease,color .25s ease; }
.app { width:min(780px,100%); margin:0 auto; padding:24px 16px max(24px,env(safe-area-inset-bottom)); }
.hero { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin:12px 0 20px; flex-wrap:wrap; }
.login-head { margin-bottom:18px; }
.login-head h2 { margin:0 0 8px; font-size:26px; }
.login-sub { margin:0; color:var(--muted); line-height:1.55; font-size:14px; }
.hero-side { display:flex; flex-direction:column; align-items:flex-end; gap:10px; margin-left:auto; }
.theme-switch { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.theme-switch-head { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.theme-palette-toggle { min-width:44px; min-height:44px; padding:0 12px; font-size:11px; border-radius:var(--radius-chip); }
.theme-switch-label { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.theme-mode-btn { min-width:44px; min-height:44px; padding:0 12px; font-size:12px; }
.liquid-glass-toggle.active,
.ui-variant-toggle.active { color:var(--on-accent); border-color:color-mix(in srgb,var(--accent2) 72%,transparent); background:var(--accent); box-shadow:0 10px 28px color-mix(in srgb,var(--accent2) 24%,transparent); }
.theme-swatches { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; align-items:center; max-width:310px; max-height:0; overflow:hidden; opacity:0; pointer-events:none; transform:translateY(-6px); background:rgba(var(--card-rgb),.7); border:1px solid transparent; padding:0 10px; border-radius:var(--radius-card); backdrop-filter:blur(6px); transition:max-height .26s ease,opacity .2s ease,transform .22s ease,padding .22s ease,border-color .22s ease; }
.theme-switch.open .theme-swatches { max-height:none; opacity:1; pointer-events:auto; transform:translateY(0); border-color:var(--line); padding:7px 10px; }
@media (hover:hover) and (pointer:fine) { .theme-switch.hover-open .theme-swatches { max-height:none; opacity:1; pointer-events:auto; transform:translateY(0); border-color:var(--line); padding:7px 10px; } }
.theme-dot { position:relative; width:46px; height:46px; min-width:46px; min-height:46px; padding:0; border-radius:var(--radius-control); border:1px solid transparent; background:transparent; box-shadow:none; transition:transform .15s ease,border-color .15s ease,background .15s ease; }
.theme-dot::before { content:''; position:absolute; inset:9px; border-radius:50%; background:var(--swatch); border:1px solid color-mix(in srgb,var(--text) 16%,transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.22); transition:transform .15s ease, box-shadow .15s ease; }
.theme-dot:hover { transform:translateY(-1px); background:color-mix(in srgb,var(--text) 5%,transparent); }
.theme-dot:hover::before { transform:scale(1.08); }
.theme-dot.active { border-color:color-mix(in srgb,var(--text) 32%,transparent); background:color-mix(in srgb,var(--swatch) 14%,transparent); }
.theme-dot.active::before { box-shadow:0 0 0 3px color-mix(in srgb,var(--swatch) 26%,transparent), inset 0 1px 0 rgba(255,255,255,.22); }
.eyebrow { color:var(--accent2); text-transform:uppercase; letter-spacing:.12em; font-size:12px; margin:0 0 8px; }
h1 { font-size:34px; line-height:1.05; margin:0 0 10px; }
.sub { margin:0; color:var(--muted); line-height:1.55; }
.card { background:rgba(var(--card-rgb),.86); border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:0 18px 60px rgba(0,0,0,.28); }
.login-card, .home-card { padding:22px; }
.login-card h2, .home-card h2 { margin:0 0 8px; }
.login-card p { color:var(--muted); }
.tabs { display:flex; gap:8px; margin:14px 0 18px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-card); padding:4px; }
.tab { flex:1; min-height:44px; border-radius:var(--radius-control); background:transparent; color:var(--muted); font-weight:600; padding:0 8px; transition:background .18s ease,color .18s ease; }
.tab:hover:not(.active) { color:var(--text); background:rgba(var(--card-rgb),.6); }
.tab.active { background:var(--accent); color:var(--on-accent); }
.pane { animation:fade .18s ease; }
@keyframes fade { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:none; } }
button.primary { width:100%; }
.field-label { display:block; color:var(--muted); font-size:13px; margin:14px 0 7px; }
.row { display:flex; gap:10px; }
input, textarea { width:100%; border:1px solid var(--line); border-radius:var(--radius-control); background:var(--bg); color:var(--text); padding:13px 14px; font:inherit; outline:none; transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; }
textarea { resize:none; max-height:130px; }
input:focus, textarea:focus { border-color:var(--accent2); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent2) 22%,transparent); }
button { display:inline-flex; align-items:center; justify-content:center; gap:.45em; border:0; border-radius:var(--radius-control); background:var(--accent); color:var(--on-accent); font-family:var(--font-body); font-weight:700; line-height:1.12; text-align:center; padding:0 18px; min-height:46px; cursor:pointer; transition:background .18s ease,border-color .18s ease,color .18s ease,transform .12s ease,box-shadow .18s ease,filter .18s ease; }
button,input,textarea,select { -webkit-tap-highlight-color:transparent; }
button:hover:not(:disabled) { filter:brightness(1.08); }
button:active:not(:disabled) { transform:translateY(1px) scale(.995); }
button.tap-feedback:not(:disabled) { transform:translateY(1px) scale(.97); filter:brightness(1.12) saturate(1.06); }
button:disabled { opacity:.55; cursor:not-allowed; }
.ghost { background:transparent; color:var(--muted); border:1px solid var(--line); }
.ghost:hover:not(:disabled) { color:var(--text); border-color:var(--muted); filter:none; }
.ghost:active:not(:disabled) { transform:translateY(1px) scale(.995); }
.danger-lite { color:color-mix(in srgb,var(--danger) 82%,var(--text)); border-color:color-mix(in srgb,var(--danger) 45%,var(--line)); }
.danger-lite:hover:not(:disabled) { color:var(--text); border-color:var(--danger); background:color-mix(in srgb,var(--danger) 18%,transparent); }
.small { min-height:44px; padding:0 12px; line-height:1.05; }
.hidden { display:none !important; }
.hp-field { position:absolute; width:1px; height:1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.msg { min-height:20px; color:var(--accent); }
.guest-static-panel { display:flex; flex-direction:column; gap:18px; margin:16px 0; padding:20px; border:1px solid color-mix(in srgb,var(--accent2) 34%,var(--line)); border-radius:var(--radius-card); background:linear-gradient(135deg,color-mix(in srgb,var(--accent2) 8%,var(--card)),var(--card)); box-shadow:0 10px 30px #00000010; }
.guest-static-hero { display:flex; flex-direction:column; gap:8px; }
.guest-static-badge { align-self:flex-start; font-size:11px; font-weight:700; color:var(--accent2); background:color-mix(in srgb,var(--accent2) 15%,transparent); border:1px solid color-mix(in srgb,var(--accent2) 35%,transparent); padding:3px 8px; border-radius:var(--radius-chip); }
.guest-static-title { margin:0; font-size:19px; color:var(--text); font-weight:800; letter-spacing:.02em; }
.guest-static-desc { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
.guest-static-features { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-top:4px; }
.guest-feature-card { padding:14px; border-radius:calc(var(--radius-card) - 2px); border:1px solid var(--line); background:color-mix(in srgb,var(--bg) 60%,var(--card)); display:flex; flex-direction:column; gap:4px; }
.guest-feature-icon { font-size:20px; line-height:1; margin-bottom:4px; }
.guest-feature-card strong { font-size:14px; color:var(--text); font-weight:700; }
.guest-feature-card p { margin:0; font-size:12px; color:var(--muted); line-height:1.5; }
.guest-static-footer { display:flex; justify-content:flex-end; align-items:center; gap:12px; padding-top:14px; border-top:1px solid var(--line); margin-top:2px; flex-wrap:wrap; }
.guest-static-cta { min-height:44px; padding:0 24px; font-weight:700; }
@media (max-width:560px) { .guest-static-footer { justify-content:stretch; } .guest-static-cta { width:100%; } }
.home-top { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; margin-bottom:16px; }
.home-top-right { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.home-coin-badge { font-size:12px; color:var(--gold); border:1px solid color-mix(in srgb,var(--gold) 50%,transparent); padding:4px 10px; border-radius:var(--radius-chip); background:color-mix(in srgb,var(--gold) 12%,transparent); box-shadow:0 8px 18px color-mix(in srgb,var(--gold) 12%,transparent); font-weight:900; white-space:nowrap; }
.site-stats { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.site-stat { color:var(--muted); font-size:12px; white-space:nowrap; }
.site-stat strong { color:var(--accent2); font-variant-numeric:tabular-nums; margin-left:3px; }
.site-stat + .site-stat::before { content:'·'; margin:0 2px 0 0; color:color-mix(in srgb,var(--muted) 70%,transparent); }
.changelog-btn { min-height:44px; padding:0 12px; font-size:12px; font-weight:600; background:transparent; color:var(--accent2); border:1px solid color-mix(in srgb,var(--accent2) 45%,transparent); border-radius:var(--radius-chip); }
.changelog-btn:hover:not(:disabled) { color:var(--text); border-color:var(--accent2); box-shadow:0 0 10px color-mix(in srgb,var(--accent2) 30%,transparent); }
.changelog-btn span { margin-left:5px; color:var(--gold); font-weight:900; font-variant-numeric:tabular-nums; }
.changelog-panel { margin-top:14px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--bg); padding:12px 14px; animation:fade .18s ease; }
.changelog-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.changelog-head strong { color:var(--accent2); font-size:15px; }
.version-confirm { margin-bottom:10px; }
.version-card { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px; border:1px solid color-mix(in srgb,var(--accent2) 34%,var(--line)); border-radius:var(--radius-card); background:var(--card); }
.version-card-main { display:flex; flex-direction:column; gap:3px; min-width:0; }
.version-card-main strong { color:var(--gold); font-size:17px; font-variant-numeric:tabular-nums; }
.version-card-main span,.version-hint { color:var(--muted); font-size:12px; line-height:1.45; }
.version-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.version-hint { margin:8px 2px 0; }
.changelog-list { display:flex; flex-direction:column; gap:8px; }
.changelog-day { border:1px solid var(--line); border-radius:var(--radius-card); background:color-mix(in srgb,var(--panel) 62%,transparent); overflow:hidden; }
.changelog-day summary { min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 12px; cursor:pointer; color:var(--text); list-style:none; }
.changelog-day summary::-webkit-details-marker { display:none; }
.changelog-day summary::after { content:'展开'; color:var(--accent2); font-size:12px; font-weight:900; }
.changelog-day[open] summary::after { content:'收起'; }
.changelog-day summary span { color:var(--muted); font-size:12px; margin-left:auto; }
.changelog-day-list { display:flex; flex-direction:column; gap:8px; padding:0 10px 10px; }
.changelog-item { display:flex; gap:10px; align-items:baseline; padding:8px 10px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-control); }
.changelog-date { flex:0 0 auto; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.changelog-text { color:var(--text); line-height:1.5; font-size:14px; }
.badge { font-size:12px; color:var(--gold); border:1px solid color-mix(in srgb,var(--gold) 45%,transparent); padding:4px 8px; border-radius:var(--radius-chip); letter-spacing:.03em; }
.tiles { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tile-group-title { grid-column:1 / -1; display:flex; align-items:center; gap:10px; margin:4px 2px -2px; color:var(--accent2); font-size:12px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.tile-group-title::after { content:''; height:1px; flex:1; background:var(--card); }
.tile { min-height:132px; text-align:left; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:14px; background:var(--card); color:var(--text); border:1px solid var(--line); padding:16px; transition:border-color .18s ease,transform .15s ease,box-shadow .18s ease,background .2s ease; }
.tile strong { font-size:18px; transition:color .18s ease; }
.tile span { color:var(--muted); line-height:1.45; font-weight:500; }
.tile:hover { border-color:var(--accent2); box-shadow:0 10px 28px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.05); }
.tile:hover strong { color:var(--accent2); }
.tile:active { transform:translateY(1px); }
.today-hub { margin:14px 0 16px; padding:14px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--card); box-shadow:0 14px 32px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.04); }
.today-hub-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.today-hub-head > div { display:flex; flex-direction:column; gap:3px; }
.today-hub-head strong { color:var(--text); font-size:16px; }
.today-summary { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; margin-bottom:12px; padding:12px; border:1px solid color-mix(in srgb,var(--accent2) 24%,var(--line)); border-radius:var(--radius-card); background:color-mix(in srgb,var(--accent2) 8%,var(--bg)); }
.today-progress { min-width:0; display:flex; flex-direction:column; gap:5px; }
.today-progress strong { color:var(--text); font-size:14px; line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.today-progress-track { height:7px; overflow:hidden; border-radius:var(--radius-chip); background:color-mix(in srgb,var(--line) 65%,transparent); }
.today-progress-track span { display:block; width:0; height:100%; border-radius:inherit; background:var(--accent); transition:width .24s ease; }
.today-next-btn { margin:0; white-space:nowrap; }
.today-next-btn.done { color:var(--on-accent); border-color:var(--accent); background:var(--accent); }
.today-hub-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; }
.today-card { min-height:86px; padding:12px; border:1px solid var(--line); border-radius:var(--radius-card); background:color-mix(in srgb,var(--bg) 72%,transparent); color:var(--text); display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:5px; text-align:left; }
.today-card span { font-size:20px; }
.today-card strong { font-size:14px; }
.today-card em { font-style:normal; color:var(--muted); font-size:12px; line-height:1.35; }
.today-card.urgent { border-color:color-mix(in srgb,var(--gold) 58%,var(--line)); box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 18%,transparent),0 10px 22px color-mix(in srgb,var(--gold) 10%,transparent); }
.today-card.done { opacity:.84; }
.today-card:hover:not(:disabled) { border-color:var(--accent2); transform:translateY(-1px); }
.pet-home-status { width:100%; min-height:58px; margin-top:12px; padding:8px 12px; display:flex; align-items:center; gap:10px; text-align:left; background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:8px; }
.pet-home-status:hover:not(:disabled) { border-color:var(--accent2); filter:none; }
.pet-home-symbol { width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; background:var(--panel); border:1px solid var(--line); border-radius:6px; font-size:22px; }
.pet-home-main { min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.pet-home-main strong { font-size:14px; }
.pet-home-main span { color:var(--muted); font-size:12px; font-weight:500; }
.pet-home-open { flex:0 0 auto; color:var(--accent2); font-size:12px; font-weight:700; }
.chat-card { overflow:hidden; height:calc(100dvh - 150px); min-height:520px; display:flex; flex-direction:column; }
.chat-top { padding:12px 14px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; color:var(--muted); gap:10px; }
.chat-meta { display:flex; flex-direction:column; align-items:center; gap:2px; }
.chat-persona-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--bg) 72%,transparent); }
.chat-persona-row label { color:var(--muted); font-size:13px; font-weight:700; }
.chat-persona-row select { width:auto; min-width:156px; min-height:44px; padding:8px 10px; font-size:13px; }
.messages { flex:1; overflow:auto; padding:18px 14px; display:flex; flex-direction:column; gap:12px; }
.bubble { max-width:86%; padding:12px 14px; border-radius:var(--radius-card); line-height:1.55; white-space:pre-wrap; }
.bubble.user { align-self:flex-end; background:var(--user-bubble); color:#fffaf2; border-bottom-right-radius:6px; }
.bubble.assistant { align-self:flex-start; background:var(--panel); border:1px solid var(--line); border-bottom-left-radius:6px; }
.composer { padding:12px; border-top:1px solid var(--line); display:flex; gap:10px; align-items:flex-end; }
.composer button { flex:0 0 auto; }
.admin-card { overflow:hidden; display:flex; flex-direction:column; }
.admin-card .chat-top strong { color:var(--admin-text); }
.admin-body { padding:16px 14px; }
.admin-body h3 { margin:20px 0 10px; font-size:15px; color:var(--admin-accent); }
.admin-body h3:first-child { margin-top:0; }
.profile-card { overflow:hidden; }
.profile-body { padding:18px 16px; display:flex; flex-direction:column; gap:0; }
.profile-overview { display:flex; align-items:center; gap:14px; padding:2px 0 18px; }
.profile-avatar-wrap { display:flex; flex-direction:column; align-items:center; gap:8px; flex:0 0 auto; }
.profile-avatar { width:64px; height:64px; flex:0 0 64px; display:grid; place-items:center; border-radius:50%; border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line)); background:var(--accent); color:var(--on-accent); font-size:25px; font-weight:800; overflow:hidden; background-size:cover; background-position:center; cursor:pointer; box-shadow:0 10px 22px color-mix(in srgb,var(--accent) 18%,transparent); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.profile-avatar:hover { transform:translateY(-1px); border-color:var(--accent2); box-shadow:0 16px 30px color-mix(in srgb,var(--accent2) 20%,transparent); }
.profile-avatar.has-image { color:transparent; text-shadow:none; }
.profile-avatar.has-image::before { content:none; }
.profile-avatar img { width:112%; height:112%; object-fit:contain; object-position:center; display:block; pointer-events:none; -webkit-user-drag:none; user-select:none; }
.profile-persona-preview { margin-top:12px; min-height:160px; display:grid; place-items:center; overflow:hidden; border-radius:var(--radius-card); background:color-mix(in srgb,var(--bg) 84%,transparent); }
.profile-persona-preview img { width:100%; max-height:280px; object-fit:contain; object-position:center; display:block; }
.persona-generated-preview { display:grid; grid-template-columns:minmax(128px,180px) minmax(0,1fr); gap:12px; align-items:center; margin-bottom:10px; }
.persona-generated-preview canvas { width:100%; aspect-ratio:360 / 410; display:block; border-radius:var(--radius-card); background:#f2ecdd; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent2) 20%,transparent); }
.persona-generated-meta { display:flex; flex-direction:column; gap:4px; min-width:0; font-size:12px; color:var(--muted); }
.persona-generated-meta strong { color:var(--text); font-size:14px; }
@media (max-width:520px) { .persona-generated-preview { grid-template-columns:1fr; } .persona-generated-preview canvas { max-width:180px; justify-self:center; } }
.profile-avatar-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.profile-avatar-actions .small { min-height:44px; padding:0 10px; font-size:12px; }
.profile-identity { min-width:0; display:flex; flex-direction:column; gap:4px; }
.persona-prompt-box { margin-top:10px; padding:10px; border:1px solid color-mix(in srgb,var(--accent2) 28%,var(--line)); border-radius:var(--radius-card); background:color-mix(in srgb,var(--panel) 46%,transparent); }
.persona-prompt-box textarea { min-height:132px; max-height:220px; font-size:12px; line-height:1.55; resize:vertical; }
.persona-prompt-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; flex-wrap:wrap; }
.profile-identity > strong { font-size:21px; overflow-wrap:anywhere; }
.profile-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:4px; }
.profile-meta .pill { margin-left:0; }
#profileMsg { margin:0 0 2px; }
.profile-card-preview { margin:0 0 10px; padding:12px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--bg); }
.profile-card-preview strong { color:var(--accent2); }
.profile-card-preview p { margin:6px 0 0; line-height:1.55; white-space:pre-wrap; }
.profile-showcase-section .profile-section-head { margin-bottom:10px; }
.profile-showcase-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
gap:10px;
}
.profile-showcase-card {
min-width:0;
min-height:108px;
padding:12px;
display:flex;
flex-direction:column;
gap:6px;
justify-content:center;
border:1px solid color-mix(in srgb,var(--line) 82%,transparent);
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--panel) 42%,transparent);
}
.profile-showcase-card span {
color:var(--accent2);
font-size:11px;
font-weight:950;
letter-spacing:.12em;
}
.profile-showcase-card strong {
min-width:0;
color:var(--text);
font-size:15px;
overflow-wrap:anywhere;
}
.profile-showcase-card em {
min-width:0;
color:var(--muted);
font-size:12px;
font-style:normal;
line-height:1.45;
}
.profile-showcase-photo img {
width:100%;
aspect-ratio:4 / 3;
object-fit:cover;
border-radius:var(--radius-card);
border:1px solid color-mix(in srgb,var(--line) 80%,transparent);
}
.profile-showcase-actions {
margin-top:10px;
}
.profile-visit-box { margin:0 0 10px; padding:14px; border:1px solid color-mix(in srgb,var(--accent2) 24%,var(--line)); border-radius:var(--radius-card); background:color-mix(in srgb,var(--accent2) 7%,var(--bg)); }
.profile-visit-actions { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.profile-visit-actions button { flex:1 1 140px; min-height:44px; }
.profile-visit-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:end; }
.profile-visit-form .field-label { grid-column:1 / -1; margin:0; }
.profile-visit-form textarea { min-height:66px; resize:vertical; }
.profile-visit-list { display:grid; gap:8px; margin-top:10px; }
.profile-visit-item { display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:8px; align-items:center; padding:9px 10px; border:1px solid color-mix(in srgb,var(--line) 82%,transparent); border-radius:var(--radius-card); background:color-mix(in srgb,var(--panel) 46%,transparent); }
.profile-visit-item span { width:32px; height:32px; display:grid; place-items:center; border-radius:var(--radius-control); color:var(--on-accent); background:color-mix(in srgb,var(--accent2) 70%,var(--section-tint)); font-size:12px; font-weight:950; }
.profile-visit-item strong { min-width:0; color:var(--text); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-visit-item small { color:var(--muted); font-size:11px; white-space:nowrap; }
.profile-visit-item em { grid-column:2 / -1; color:var(--muted); font-size:12px; font-style:normal; line-height:1.4; }
@media (max-width:560px) {
.profile-visit-form,
.profile-visit-item {
grid-template-columns:1fr;
}
.profile-visit-form button {
width:100%;
min-height:44px;
}
.profile-visit-item em {
grid-column:auto;
}
}
.tile.has-unread { position:relative; border-color:color-mix(in srgb,var(--danger) 52%,var(--line)); }
.tile.has-unread::after { content:attr(data-unread); position:absolute; right:10px; top:10px; min-width:20px; height:20px; padding:0 6px; display:grid; place-items:center; border-radius:var(--radius-chip); background:var(--danger); color:#fffaf2; font-size:11px; font-weight:900; box-shadow:0 0 0 2px var(--panel); }
.review-center { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.review-count { min-width:32px; height:32px; display:grid; place-items:center; border-radius:var(--radius-chip); border:1px solid var(--line); color:var(--muted); font-weight:900; }
.review-count.active { color:#fffaf2; background:var(--danger); border-color:var(--danger); }
.profile-section { padding:18px 0; border-top:1px solid var(--line); }
.profile-section-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; }
.profile-section-head strong { font-size:15px; color:var(--accent2); }
.profile-form { display:flex; align-items:stretch; gap:8px; }
.profile-form input { min-width:0; }
.profile-form button { flex:0 0 auto; }
.profile-persona-actions { flex-wrap:wrap; }
.profile-persona-actions button { flex:1 1 106px; }
.profile-form-stack { display:grid; grid-template-columns:1fr 1fr; }
.profile-form-stack button { grid-column:1 / -1; justify-self:end; }
.fortune-card { overflow:hidden; }
.fortune-body { padding:20px 16px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.fortune-deck { width:min(280px,100%); height:360px; perspective:1000px; }
.fortune-flip-card { position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .85s cubic-bezier(.2,.8,.2,1); }
.fortune-flip-card.revealed { transform:rotateY(180deg); }
.fortune-flip-card.shuffling { animation:fortune-shuffle .7s ease-in-out infinite; }
.fortune-face { position:absolute; inset:0; backface-visibility:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:24px; border:1px solid var(--line); border-radius:var(--radius-card); background:color-mix(in srgb,var(--panel) 72%,var(--bg)); box-shadow:0 18px 42px rgba(0,0,0,.28); }
.fortune-front::before,.fortune-back::before { content:''; position:absolute; inset:12px; border:1px solid color-mix(in srgb,var(--accent2) 35%,transparent); border-radius:var(--radius-control); pointer-events:none; }
.fortune-symbol { width:82px; height:82px; display:grid; place-items:center; border-radius:50%; background:var(--panel); border:1px solid var(--line); color:var(--gold); font-size:44px; text-shadow:0 0 18px color-mix(in srgb,var(--gold) 55%,transparent); }
.fortune-front strong { font-size:30px; letter-spacing:.08em; color:var(--accent2); }
.fortune-front span:last-child { color:var(--muted); font-size:13px; }
.fortune-back { transform:rotateY(180deg); }
.fortune-result-label { min-width:92px; padding:6px 12px; border:1px solid var(--line); border-radius:var(--radius-chip); color:var(--gold); font-weight:800; font-size:18px; }
.fortune-back strong { font-size:24px; color:var(--accent2); }
.fortune-back p { margin:0; color:var(--text); line-height:1.6; }
.fortune-back[data-tone='bright'] { background:color-mix(in srgb,var(--gold) 12%,var(--bg)); }
.fortune-back[data-tone='storm'],.fortune-back[data-tone='rain'] { background:color-mix(in srgb,var(--accent2) 10%,var(--bg)); }
.fortune-draw-btn { min-width:210px; }
.fortune-draw-btn:disabled { opacity:.72; }
@keyframes fortune-shuffle { 0%,100% { transform:translateX(0) rotateZ(0); } 25% { transform:translateX(-7px) rotateZ(-2deg); } 75% { transform:translateX(7px) rotateZ(2deg); } }
.pet-card { overflow:hidden; }
.pet-body-wrap { padding:16px; display:flex; flex-direction:column; gap:14px; }
.pet-hero { width:min(360px,100%); align-self:center; }
.pet-stage { position:relative; width:100%; height:250px; overflow:hidden; background:var(--bg); border:1px solid var(--line); border-radius:8px; }
.pet-stage::before { content:''; position:absolute; inset:auto 0 0; height:52px; background:var(--panel); border-top:1px solid var(--line); }
.pet-scene { position:absolute; inset:0; z-index:0; pointer-events:none; }
.pet-scene-label { position:absolute; left:14px; top:12px; z-index:3; max-width:calc(100% - 28px); padding:6px 10px; border:1px solid color-mix(in srgb,var(--accent2) 28%,var(--line)); border-radius:var(--radius-chip); color:var(--accent2); background:color-mix(in srgb,var(--panel) 82%,transparent); font-size:12px; font-weight:900; box-shadow:0 8px 18px rgba(0,0,0,.12); }
.pet-scene-prop { position:absolute; display:block; opacity:0; transform:translateY(4px); transition:opacity .2s ease,transform .2s ease; }
.pet-stage[data-action='work'] { background:color-mix(in srgb,#d8f0ff 18%,var(--bg)); }
.pet-scene[data-action='work'] .pet-scene-prop { opacity:1; transform:none; }
.pet-scene[data-action='work'] .pet-scene-prop-a { right:28px; bottom:54px; width:94px; height:62px; border:5px solid #68899c; border-top:0; border-radius:0 0 10px 10px; background:#bfe7f2; box-shadow:inset 0 -12px rgba(255,255,255,.35); }
.pet-scene[data-action='work'] .pet-scene-prop-a::before { content:''; position:absolute; left:16px; top:-26px; width:62px; height:22px; border:5px solid #68899c; border-bottom:0; border-radius:18px 18px 0 0; }
.pet-scene[data-action='work'] .pet-scene-prop-b { right:44px; bottom:120px; width:14px; height:36px; border-radius:var(--radius-chip); background:#dff9ff; box-shadow:22px 6px 0 -2px #dff9ff, 43px 0 0 -4px #dff9ff; animation:pet-bubbles 1.1s ease-in-out infinite; }
.pet-scene[data-action='work'] .pet-scene-prop-c { right:104px; bottom:59px; width:38px; height:12px; border:4px solid #f7fafc; border-radius:50%; background:#fff; transform:rotate(-12deg); }
.pet-stage[data-action='feed'] { background:color-mix(in srgb,#ffe8bd 18%,var(--bg)); }
.pet-scene[data-action='feed'] .pet-scene-prop { opacity:1; transform:none; }
.pet-scene[data-action='feed'] .pet-scene-prop-a { left:34px; bottom:54px; width:106px; height:34px; border:5px solid #8a5b38; border-radius:10px; background:#b77945; box-shadow:0 18px 0 -11px #573d32; }
.pet-scene[data-action='feed'] .pet-scene-prop-b { left:68px; bottom:89px; width:42px; height:22px; border:4px solid #d7dde5; border-radius:50%; background:#fff; }
.pet-scene[data-action='feed'] .pet-scene-prop-b::after { content:''; position:absolute; left:10px; top:5px; width:16px; height:10px; border-radius:50%; background:#f0b25b; }
.pet-scene[data-action='feed'] .pet-scene-prop-c { left:116px; bottom:86px; width:22px; height:30px; border:4px solid #7bb56d; border-radius:8px; background:#a7d985; }
.pet-stage[data-action='play'] { background:color-mix(in srgb,#9ad66a 18%,var(--bg)); }
.pet-scene[data-action='play'] .pet-scene-prop { opacity:1; transform:none; }
.pet-scene[data-action='play'] .pet-scene-prop-a { left:36px; bottom:70px; width:48px; height:48px; border:5px solid #244d7d; border-radius:50%; background:#65a9ed; box-shadow:inset -10px -8px 0 #4f91d8,inset 9px 8px 0 rgba(255,255,255,.34); animation:pet-ball 1.2s ease-in-out infinite; }
.pet-scene[data-action='play'] .pet-scene-prop-b { right:40px; bottom:54px; width:8px; height:8px; border-radius:50%; background:#ff8aa8; box-shadow:14px 0 0 #ff8aa8,28px 1px 0 #ffd65c,42px -1px 0 #ff8aa8,56px 0 0 #ffd65c,70px 1px 0 #ff8aa8,8px 10px 0 #ffd65c,24px 11px 0 #ff8aa8,40px 10px 0 #ffd65c,58px 11px 0 #ff8aa8; }
.pet-scene[data-action='play'] .pet-scene-prop-c { left:50%; bottom:54px; width:110px; height:14px; border-radius:50%; background:rgba(38,94,47,.18); transform:translateX(-50%); }
.pet-stage[data-action='interact'] { background:color-mix(in srgb,#ff8ab3 12%,var(--bg)); }
.pet-scene[data-action='interact'] .pet-scene-prop { opacity:1; transform:none; }
.pet-scene[data-action='interact'] .pet-scene-prop-a { left:54px; top:72px; color:#ff7fa8; font-size:28px; text-shadow:38px -10px #ffadc7, 112px 5px #ff8ab3; }
.pet-scene[data-action='interact'] .pet-scene-prop-a::before { content:'♥'; }
.pet-scene[data-action='interact'] .pet-scene-prop-b { right:46px; bottom:68px; width:68px; height:50px; border:4px solid #d49367; border-radius:12px 12px 8px 8px; background:#ffd9b7; box-shadow:inset 0 -10px rgba(139,88,51,.12); }
.pet-stage[data-action='upgrade'] { background:color-mix(in srgb,var(--gold) 14%,var(--bg)); }
.pet-stage[data-action='upgrade'] .pixel-pet { animation:pet-upgrade-pop .9s ease-in-out infinite; }
.pet-scene[data-action='upgrade'] .pet-scene-prop { opacity:1; transform:none; }
.pet-scene[data-action='upgrade'] .pet-scene-prop-a { left:34px; top:72px; width:12px; height:12px; background:var(--gold); box-shadow:54px -28px 0 #fff3a3,118px 2px 0 var(--accent2),192px -18px 0 #ffd86a,250px 12px 0 #fff3a3; animation:pet-sparkle 1.1s ease-in-out infinite; }
.pixel-pet { position:absolute; left:50%; top:24px; width:230px; height:210px; transform:translateX(-50%); image-rendering:pixelated; }
.pet-pixel-image { top:8px; width:230px; height:230px; background:none; image-rendering:auto; }
.pet-pixel-image .pet-jiji-image { display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.pet-stage[data-species='jiji'] .pixel-pet > :not(.pet-jiji-image):not(.pet-image-fallback),
.pet-plaza-sprite-stage[data-species='jiji'] .pixel-pet > :not(.pet-jiji-image):not(.pet-image-fallback) { display:none; }
.pet-species-choice img { width:34px; height:34px; flex:0 0 34px; object-fit:contain; object-position:50% 50%; display:block; margin:0; pointer-events:none; }
.pet-body,.pet-head,.pet-tail,.pet-ear,.pet-eye,.pet-nose,.pet-outfit { position:absolute; display:block; }
.pet-body { left:74px; top:105px; width:90px; height:84px; background:#d98d49; border:5px solid #573d32; box-shadow:inset 10px 0 #eda75f; }
.pet-head { left:51px; top:48px; width:136px; height:100px; background:#e59b52; border:5px solid #573d32; box-shadow:inset 12px 0 #f0ad66; z-index:3; }
.pet-ear { top:-30px; width:48px; height:40px; background:#e59b52; border:5px solid #573d32; z-index:-1; }
.pet-ear::after { content:''; position:absolute; inset:9px 10px 5px; background:#c96f67; }
.pet-ear-left { left:-5px; transform:skewY(18deg); }
.pet-ear-right { right:-5px; transform:skewY(-18deg); }
.pet-eye { top:39px; width:13px; height:18px; background:#172026; box-shadow:inset 4px 3px #fff; }
.pet-eye-left { left:31px; }
.pet-eye-right { right:31px; }
.pet-nose { left:58px; top:68px; width:12px; height:9px; background:#9d4d57; }
.pet-nose::after { content:''; position:absolute; left:-10px; top:9px; width:32px; height:10px; border-bottom:3px solid #573d32; }
.pet-tail { left:154px; top:132px; width:58px; height:22px; background:#d98d49; border:5px solid #573d32; transform:rotate(-18deg); transform-origin:left center; z-index:1; }
.pet-body::after { content:''; position:absolute; left:13px; bottom:-15px; width:22px; height:14px; background:#e59b52; border:4px solid #573d32; box-shadow:45px 0 0 #e59b52,45px 0 0 4px #573d32; }
.pet-outfit { display:none; z-index:6; }
.pet-outfit-scarf { left:62px; top:137px; width:116px; height:18px; background:#db4b52; border:4px solid #6b2931; }
.pet-outfit-scarf::after { content:''; position:absolute; right:5px; top:14px; width:23px; height:48px; background:#db4b52; border:4px solid #6b2931; }
.pet-outfit-cap { left:75px; top:19px; width:90px; height:39px; padding-top:2px; text-align:center; background:#315f9f; border:5px solid #18385f; color:#ffd85a; font-size:22px; line-height:29px; }
.pet-outfit-cap::after { content:''; position:absolute; right:-25px; bottom:-5px; width:31px; height:12px; background:#315f9f; border:5px solid #18385f; }
.pet-outfit-bow { left:99px; top:133px; width:35px; height:20px; background:#4f91d8; border:4px solid #244d7d; }
.pet-outfit-bow::before,.pet-outfit-bow::after { content:''; position:absolute; top:-9px; width:30px; height:30px; background:#65a9ed; border:4px solid #244d7d; }
.pet-outfit-bow::before { left:-31px; transform:rotate(18deg); }
.pet-outfit-bow::after { right:-31px; transform:rotate(-18deg); }
.pet-outfit-pack { left:44px; top:121px; width:38px; height:68px; background:#6d8d55; border:5px solid #344b2a; z-index:2; }
.pet-outfit-crown { left:82px; top:4px; width:77px; height:45px; color:#ffcf40; text-shadow:3px 3px #7b5412; font-size:52px; line-height:45px; text-align:center; }
.pet-stage[data-outfit='red-scarf'] .pet-outfit-scarf,
.pet-stage[data-outfit='star-cap'] .pet-outfit-cap,
.pet-stage[data-outfit='blue-bow'] .pet-outfit-bow,
.pet-stage[data-outfit='explorer-pack'] .pet-outfit-pack,
.pet-stage[data-outfit='royal-crown'] .pet-outfit-crown { display:block; }
.pet-stage[data-species='dog'] .pet-head,.pet-stage[data-species='dog'] .pet-body,.pet-stage[data-species='dog'] .pet-tail { background:#a96f43; }
.pet-stage[data-species='dog'] .pet-head { box-shadow:inset 12px 0 #c88b5c; }
.pet-stage[data-species='dog'] .pet-body { box-shadow:inset 10px 0 #bd8153; }
.pet-stage[data-species='dog'] .pet-ear { top:-13px; width:30px; height:57px; background:#7c4b32; border-radius:0 0 8px 8px; z-index:4; }
.pet-stage[data-species='dog'] .pet-ear::after { display:none; }
.pet-stage[data-species='dog'] .pet-ear-left { left:-17px; transform:rotate(16deg); }
.pet-stage[data-species='dog'] .pet-ear-right { right:-17px; transform:rotate(-16deg); }
.pet-stage[data-species='dog'] .pet-tail { top:116px; width:68px; transform:rotate(31deg); }
.pet-stage[data-species='bunny'] .pet-head,.pet-stage[data-species='bunny'] .pet-body,.pet-stage[data-species='bunny'] .pet-tail { background:#d8d9df; }
.pet-stage[data-species='bunny'] .pet-head { top:66px; box-shadow:inset 12px 0 #f0f1f5; }
.pet-stage[data-species='bunny'] .pet-body { top:121px; box-shadow:inset 10px 0 #e9eaf0; }
.pet-stage[data-species='bunny'] .pet-ear { top:-70px; width:34px; height:92px; background:#e6e7ed; border-radius:8px 8px 0 0; z-index:-1; }
.pet-stage[data-species='bunny'] .pet-ear::after { inset:11px 8px 8px; background:#d9889e; }
.pet-stage[data-species='bunny'] .pet-ear-left { left:10px; transform:rotate(-7deg); }
.pet-stage[data-species='bunny'] .pet-ear-right { right:10px; transform:rotate(7deg); }
.pet-stage[data-species='bunny'] .pet-tail { left:151px; top:150px; width:36px; height:36px; border-radius:50%; transform:none; }
.pet-stage[data-species='fox'] .pet-head,.pet-stage[data-species='fox'] .pet-body,.pet-stage[data-species='fox'] .pet-tail { background:#d66f38; }
.pet-stage[data-species='fox'] .pet-head { box-shadow:inset 12px 0 #ef9651; }
.pet-stage[data-species='fox'] .pet-body { box-shadow:inset 10px 0 #e88949; }
.pet-stage[data-species='fox'] .pet-ear { width:56px; height:52px; background:#d66f38; }
.pet-stage[data-species='fox'] .pet-ear::after { inset:14px 13px 7px; background:#f0e4d6; }
.pet-stage[data-species='fox'] .pet-tail { top:116px; width:77px; height:31px; transform:rotate(-25deg); }
.pet-stage[data-species='fox'] .pet-tail::after { content:''; position:absolute; right:-3px; top:0; width:21px; height:21px; background:#f2e9df; border-left:4px solid #573d32; }
.pet-stage[data-species='penguin'] .pet-head,.pet-stage[data-species='penguin'] .pet-body,.pet-stage[data-species='penguin'] .pet-tail { background:#293641; }
.pet-stage[data-species='penguin'] .pet-head { top:56px; height:103px; box-shadow:inset 12px 0 #42515c; }
.pet-stage[data-species='penguin'] .pet-body { top:118px; height:77px; box-shadow:inset 10px 0 #394853; }
.pet-stage[data-species='penguin'] .pet-ear { display:none; }
.pet-stage[data-species='penguin'] .pet-head::after { content:''; position:absolute; left:26px; top:49px; width:74px; height:66px; background:#f0f3f6; border:4px solid #573d32; }
.pet-stage[data-species='penguin'] .pet-nose { left:58px; top:58px; width:18px; height:12px; background:#f0ad41; z-index:5; }
.pet-stage[data-species='penguin'] .pet-nose::after { display:none; }
.pet-stage[data-species='penguin'] .pet-tail { left:18px; top:132px; width:45px; height:20px; transform:rotate(15deg); }
.pet-stage[data-species='white-parrot'] .pet-head,.pet-stage[data-species='white-parrot'] .pet-body,.pet-stage[data-species='white-parrot'] .pet-tail { background:#e8edf0; }
.pet-stage[data-species='white-parrot'] .pet-head { top:54px; box-shadow:inset 12px 0 #fff; }
.pet-stage[data-species='white-parrot'] .pet-body { top:117px; height:82px; box-shadow:inset 10px 0 #f7fbfd; }
.pet-stage[data-species='white-parrot'] .pet-ear { display:none; }
.pet-stage[data-species='white-parrot'] .pet-head::before { content:''; position:absolute; left:50px; top:-31px; width:27px; height:36px; background:#edf1f3; border:5px solid #573d32; transform:skewX(-14deg); }
.pet-stage[data-species='white-parrot'] .pet-nose { left:56px; top:61px; width:24px; height:15px; background:#e8a743; z-index:5; }
.pet-stage[data-species='white-parrot'] .pet-nose::after { display:none; }
.pet-stage[data-species='white-parrot'] .pet-tail { left:165px; top:129px; width:63px; height:19px; transform:rotate(25deg); }
.pet-stage[data-species='sulcata-tortoise'] .pet-head { left:98px; top:99px; width:67px; height:60px; background:#b0a268; box-shadow:inset 8px 0 #cbc087; z-index:4; }
.pet-stage[data-species='sulcata-tortoise'] .pet-body { left:35px; top:108px; width:165px; height:76px; background:#78834c; border-radius:44% 44% 8px 8px; box-shadow:inset 14px 0 #9c9e5d; }
.pet-stage[data-species='sulcata-tortoise'] .pet-body::before { content:''; position:absolute; left:41px; top:-50px; width:96px; height:86px; background:#897c46; border:5px solid #573d32; border-radius:44% 44% 12px 12px; box-shadow:inset 12px 0 #a79858; }
.pet-stage[data-species='sulcata-tortoise'] .pet-body::after { background:#b0a268; box-shadow:45px 0 0 #b0a268,45px 0 0 4px #573d32; }
.pet-stage[data-species='sulcata-tortoise'] .pet-ear { display:none; }
.pet-stage[data-species='sulcata-tortoise'] .pet-eye { top:22px; }
.pet-stage[data-species='sulcata-tortoise'] .pet-nose { left:28px; top:43px; background:#77834a; }
.pet-stage[data-species='sulcata-tortoise'] .pet-tail { left:15px; top:145px; width:38px; height:17px; background:#b0a268; transform:rotate(-16deg); }
.pet-stage[data-species='grey-hamster'] .pet-head,.pet-stage[data-species='grey-hamster'] .pet-body,.pet-stage[data-species='grey-hamster'] .pet-tail { background:#9ba1a8; }
.pet-stage[data-species='grey-hamster'] .pet-head { top:58px; box-shadow:inset 12px 0 #bfc4ca; }
.pet-stage[data-species='grey-hamster'] .pet-body { top:118px; box-shadow:inset 10px 0 #b2b7bd; }
.pet-stage[data-species='grey-hamster'] .pet-ear { top:-19px; width:38px; height:38px; background:#a9afb5; border-radius:50%; z-index:-1; }
.pet-stage[data-species='grey-hamster'] .pet-ear::after { inset:9px; background:#d993a7; border-radius:50%; }
.pet-stage[data-species='grey-hamster'] .pet-ear-left { left:4px; transform:none; }
.pet-stage[data-species='grey-hamster'] .pet-ear-right { right:4px; transform:none; }
.pet-stage[data-species='grey-hamster'] .pet-tail { display:none; }
.pet-stage[data-species='grey-hamster'] .pet-head::after { content:''; position:absolute; left:45px; top:65px; width:35px; height:22px; background:#e9e3dc; border:3px solid #573d32; }
.pet-stage[data-action='interact'] .pixel-pet { animation:pet-wiggle .55s ease-in-out; }
.pet-stage[data-action='play'] .pixel-pet { animation:pet-hop .6s ease-in-out; }
.pet-stage[data-action='work'] .pixel-pet { animation:pet-work .6s steps(2,end); }
.pet-stage[data-action='feed'] .pixel-pet { animation:pet-nibble .55s ease-in-out; }
@keyframes pet-wiggle { 0%,100% { transform:translateX(-50%) rotate(0); } 25% { transform:translateX(-50%) rotate(-4deg); } 75% { transform:translateX(-50%) rotate(4deg); } }
@keyframes pet-hop { 0%,100% { transform:translateX(-50%) translateY(0); } 45% { transform:translateX(-50%) translateY(-19px); } }
@keyframes pet-work { 0%,100% { transform:translateX(-50%) translateX(0); } 50% { transform:translateX(-50%) translateX(10px); } }
@keyframes pet-nibble { 0%,100% { transform:translateX(-50%) scale(1); } 50% { transform:translateX(-50%) scale(.96,1.04); } }
@keyframes pet-upgrade-pop { 0%,100% { transform:translateX(-50%) translateY(0) scale(1); } 45% { transform:translateX(-50%) translateY(-10px) scale(1.05); } }
@keyframes pet-bubbles { 0%,100% { transform:translateY(8px); opacity:.35; } 50% { transform:translateY(-8px); opacity:.95; } }
@keyframes pet-ball { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-14px) rotate(18deg); } }
@keyframes pet-sparkle { 0%,100% { transform:scale(.8); opacity:.55; } 50% { transform:scale(1.25); opacity:1; } }
.pet-title-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 2px 0; }
.pet-title-row > div { min-width:0; display:flex; flex-direction:column; gap:3px; }
.pet-title-row strong { font-size:21px; overflow-wrap:anywhere; }
.pet-level-badge { flex:0 0 auto; padding:6px 10px; border:1px solid var(--accent2); border-radius:var(--radius-chip); color:var(--accent2); font-weight:800; font-variant-numeric:tabular-nums; }
.pet-stats { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.pet-stat { min-width:0; padding:11px 8px; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; }
.pet-stat + .pet-stat { border-left:1px solid var(--line); }
.pet-stat span { color:var(--muted); font-size:11px; }
.pet-stat strong { color:var(--accent2); font-size:17px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.pet-activity-progress { width:100%; height:8px; overflow:hidden; background:var(--panel); border-radius:var(--radius-chip); }
.pet-activity-progress span { display:block; width:0; height:100%; background:var(--ok); transition:width .25s ease; }
.pet-upgrade-dock { position:sticky; bottom:0; z-index:5; display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; padding:12px; border:1px solid color-mix(in srgb,var(--accent2) 34%,var(--line)); border-radius:var(--radius-card); background:var(--card); box-shadow:0 16px 34px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter:blur(14px); }
.pet-upgrade-dock.ready { border-color:color-mix(in srgb,var(--gold) 70%,var(--accent2)); box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 36%,transparent),0 18px 38px rgba(0,0,0,.22); }
.pet-upgrade-dock.maxed { opacity:.82; }
.pet-upgrade-main { min-width:0; display:flex; flex-direction:column; gap:7px; }
.pet-level-progress { width:100%; height:10px; overflow:hidden; border:1px solid color-mix(in srgb,var(--accent2) 20%,var(--line)); border-radius:var(--radius-chip); background:color-mix(in srgb,var(--bg) 78%,transparent); }
.pet-level-progress span { display:block; width:0; height:100%; border-radius:inherit; background:var(--accent2); transition:width .28s ease; }
.pet-upgrade-reward { color:var(--text); font-size:12px; line-height:1.45; font-weight:750; }
.pet-upgrade-btn { min-width:92px; min-height:46px; border-radius:var(--radius-chip); font-weight:900; }
.pet-upgrade-dock.ready .pet-upgrade-btn { animation:pet-upgrade-ready 1.5s ease-in-out infinite; }
.pet-upgrade-note { display:flex; flex-direction:column; gap:5px; padding:12px; border:1px solid color-mix(in srgb,var(--accent2) 26%,var(--line)); border-radius:var(--radius-card); background:color-mix(in srgb,var(--accent2) 8%,var(--bg)); }
.pet-upgrade-note strong { color:var(--accent2); font-size:14px; }
@keyframes pet-upgrade-ready { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-2px); } }
#petMsg { margin:0; text-align:center; }
.pet-tabs { display:grid; grid-template-columns:repeat(6,1fr); gap:4px; padding:4px; background:var(--bg); border:1px solid var(--line); border-radius:8px; }
.pet-tab { min-height:44px; padding:0 8px; background:transparent; border-radius:6px; color:var(--muted); }
.pet-tab.active { background:var(--accent); color:var(--on-accent); }
.pet-rank-section { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.pet-rank-section > strong { color:var(--accent2); font-size:13px; letter-spacing:.04em; }
.pet-pane { display:flex; flex-direction:column; gap:10px; }
.pet-species-row { padding:2px 0 12px; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:9px; }
.pet-section-label { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.pet-section-label strong { font-size:15px; color:var(--accent2); }
.pet-species-list { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.pet-species-choice { min-height:44px; padding:0; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--text); font-size:22px; line-height:1; display:flex; align-items:center; justify-content:center; }
.pet-species-choice:hover:not(:disabled) { border-color:var(--accent2); filter:none; }
.pet-species-choice.active { border-color:var(--accent2); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent2) 45%,transparent); background:color-mix(in srgb,var(--accent2) 12%,var(--bg)); }
.pet-vitals { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.pet-vital { min-width:0; display:flex; flex-direction:column; gap:6px; }
.pet-vital > div:first-child { display:flex; justify-content:space-between; gap:6px; color:var(--muted); font-size:12px; }
.pet-vital strong { color:var(--text); font-variant-numeric:tabular-nums; }
.pet-vital-bar { height:7px; overflow:hidden; background:var(--panel); border-radius:var(--radius-chip); }
.pet-vital-bar span { display:block; height:100%; width:0; background:var(--accent2); transition:width .25s ease; }
.pet-vital:nth-child(2) .pet-vital-bar span { background:var(--gold); }
.pet-vital:nth-child(3) .pet-vital-bar span { background:var(--ok); }
.pet-space-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding-top:4px; }
.pet-space-head strong { color:var(--accent2); font-size:15px; }
.pet-space-actions { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.pet-space-action { min-height:76px; display:flex; align-items:center; gap:10px; padding:10px; text-align:left; background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:8px; }
.pet-space-action:hover:not(:disabled) { border-color:var(--accent2); filter:none; }
.pet-space-icon { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; color:var(--accent2); background:var(--panel); border:1px solid var(--line); border-radius:6px; font-size:18px; }
.pet-space-main { min-width:0; display:flex; flex-direction:column; gap:3px; }
.pet-space-main strong { font-size:14px; }
.pet-space-main span { color:var(--muted); font-size:12px; font-weight:500; line-height:1.35; }
#petSpaceMsg { margin:0; text-align:center; }
.pet-action-row,.pet-owned-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.pet-action-row > div { min-width:0; display:flex; flex-direction:column; gap:4px; }
.pet-rename-form { display:flex; align-items:stretch; gap:8px; }
.pet-rename-form button { flex:0 0 auto; }
.custom-pet-card { display:grid; grid-template-columns:86px 1fr auto; align-items:center; gap:12px; margin-top:12px; padding:12px; background:color-mix(in srgb,var(--accent2) 7%,var(--bg)); border:1px solid color-mix(in srgb,var(--accent2) 28%,var(--line)); border-radius:var(--radius-card); }
.custom-pet-preview { width:86px; height:86px; overflow:hidden; border-radius:var(--radius-card); background:#fff; border:1px solid var(--line); box-shadow:0 10px 24px rgba(0,0,0,.12); }
.custom-pet-preview svg { display:block; width:100%; height:100%; }
.custom-pet-main { min-width:0; display:flex; flex-direction:column; gap:4px; }
.custom-pet-main strong { color:var(--accent2); font-size:14px; }
.custom-pet-card button { min-width:86px; }
.pet-task-list { gap:8px; }
.pet-task-item.done { border-color:color-mix(in srgb,var(--ok) 45%,var(--line)); }
.pet-task-item.done strong { color:var(--ok); }
.pet-shop-list { display:flex; flex-direction:column; gap:8px; }
.pet-shop-section { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin:8px 2px 2px; padding-top:8px; border-top:1px solid var(--line); }
.pet-shop-section:first-child { margin-top:0; padding-top:0; border-top:0; }
.pet-shop-section strong { color:var(--accent2); font-size:14px; }
.pet-shop-item { display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:10px; padding:10px; background:var(--bg); border:1px solid var(--line); border-radius:8px; }
.pet-shop-icon { width:44px; height:44px; display:grid; place-items:center; background:var(--panel); border:1px solid var(--line); border-radius:6px; color:var(--accent2); font-size:22px; }
.pet-shop-main { min-width:0; display:flex; flex-direction:column; gap:3px; }
.pet-shop-main strong { font-size:14px; }
.pet-shop-item button { min-width:66px; }
.pet-leaderboard { gap:7px; }
.pet-rank-item { display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:9px; }
.pet-rank-num { width:30px; height:30px; display:grid; place-items:center; border-radius:6px; background:var(--panel); border:1px solid var(--line); color:var(--muted); font-weight:800; }
.pet-rank-main { min-width:0; display:flex; flex-direction:column; gap:2px; }
.pet-rank-level { color:var(--accent2); font-weight:800; white-space:nowrap; }
.pet-rank-item.pet-rank-me { border-color:var(--accent2); }
.pet-rank-item:nth-child(1) .pet-rank-num { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.pet-rank-item:nth-child(2) .pet-rank-num,.pet-rank-item:nth-child(3) .pet-rank-num { color:var(--gold); border-color:var(--gold); }
.feedback-card { overflow:hidden; }
.feedback-body { padding:18px 16px; }
.feedback-form { display:flex; flex-direction:column; gap:10px; }
.feedback-form .field-label { margin:0; }
.feedback-form textarea { min-height:170px; max-height:320px; resize:vertical; line-height:1.55; }
.feedback-form-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.feedback-diagnostic-hint { margin:0; }
.feedback-admin-list { gap:8px; }
.feedback-admin-item { align-items:flex-start; }
.feedback-admin-item .row-item-main { width:100%; overflow:visible; }
.feedback-admin-meta { display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.feedback-admin-text { margin:5px 0 0; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.feedback-diagnostic { margin-top:8px; padding:8px 10px; border:1px solid var(--line-soft); border-radius:var(--radius-card); background:color-mix(in srgb,var(--panel) 42%,transparent); }
.feedback-diagnostic summary { cursor:pointer; color:var(--accent); font-size:12px; font-weight:900; }
.feedback-diagnostic span { display:flex; gap:8px; justify-content:space-between; padding:5px 0; border-bottom:1px solid var(--line-soft); font-size:12px; }
.feedback-diagnostic span:last-of-type { border-bottom:0; }
.feedback-diagnostic em { color:var(--muted); font-style:normal; text-align:right; overflow-wrap:anywhere; }
.error-list .feedback-admin-text { max-height:7.5em; overflow:auto; word-break:break-word; }
.error-list strong { overflow-wrap:anywhere; word-break:break-word; }
.review-jump { flex:1 1 auto; min-height:0; padding:0; border:0; background:transparent; box-shadow:none; color:inherit; text-align:left; display:flex; align-items:center; gap:9px; }
.review-jump:hover:not(:disabled) { transform:none; filter:none; color:var(--accent2); }
.review-icon { width:30px; height:30px; display:grid; place-items:center; flex:0 0 auto; border-radius:var(--radius-control); background:color-mix(in srgb,var(--accent2) 10%,var(--bg)); border:1px solid color-mix(in srgb,var(--accent2) 24%,var(--line)); }
.preview-menu { display:flex; flex-direction:column; align-items:flex-end; gap:8px; margin:-4px 0 12px; }
.preview-panel { width:100%; display:grid; grid-template-columns:repeat(2,1fr); gap:8px; padding:10px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-card); }
.checkin-card,.pet-plaza-card,.easter-egg-card { overflow:hidden; }
.checkin-body,.pet-plaza-body,.easter-egg-body { padding:18px 16px; display:flex; flex-direction:column; gap:12px; }
.easter-egg-hero { position:relative; min-height:190px; display:grid; place-items:center; align-content:center; gap:8px; padding:24px; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-card); text-align:center; background:var(--card); }
.easter-egg-hero::before { content:''; position:absolute; inset:18px; border:1px dashed color-mix(in srgb,var(--accent2) 48%,transparent); border-radius:var(--radius-card); pointer-events:none; }
.easter-egg-burst { width:64px; height:64px; display:grid; place-items:center; border-radius:50%; background:var(--card); color:#241b16; font-size:34px; font-weight:950; box-shadow:0 16px 36px color-mix(in srgb,var(--accent) 32%,transparent); }
.easter-egg-hero strong { font-size:24px; color:var(--accent2); }
.easter-egg-hero p { max-width:30em; margin:0; color:var(--muted); line-height:1.6; }
.easter-egg-rewards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.easter-egg-rewards span { min-height:74px; display:flex; flex-direction:column; justify-content:center; gap:4px; padding:12px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--bg); text-align:center; }
.easter-egg-rewards b { color:var(--accent2); font-size:20px; }
.easter-egg-rewards em { color:var(--muted); font-style:normal; font-size:12px; font-weight:800; }
.checkin-calendar { display:grid; grid-template-columns:repeat(7,1fr); gap:7px; }
.checkin-day { min-height:34px; display:grid; place-items:center; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:var(--bg); font-variant-numeric:tabular-nums; }
.checkin-day.done { color:var(--on-accent); background:var(--accent); border-color:var(--accent); font-weight:800; }
.checkin-day.today { box-shadow:0 0 0 2px color-mix(in srgb,var(--accent2) 45%,transparent); }
.pet-plaza-list { width:100%; }
.pet-plaza-pager { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:10px; color:var(--muted); font-size:12px; font-weight:800; }
.pet-plaza-pager button { min-height:44px; padding:0 12px; }
.pet-plaza-field { position:relative; min-height:460px; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-card); background:color-mix(in srgb,var(--accent2) 12%,var(--panel));
box-shadow:inset 0 -42px 0 color-mix(in srgb,#86c95c 30%,transparent), inset 0 0 70px rgba(255,255,255,.06);
}
.pet-plaza-empty { display:grid; place-items:center; text-align:center; }
.pet-plaza-empty .empty { position:relative; z-index:3; margin-top:90px; padding:12px 16px; background:color-mix(in srgb,var(--panel) 86%,transparent); border:1px solid var(--line); border-radius:var(--radius-card); }
.pet-plaza-sky { position:absolute; inset:18px 22px auto; display:flex; justify-content:space-between; color:color-mix(in srgb,var(--accent2) 55%,#fff); font-size:28px; opacity:.72; pointer-events:none; }
.pet-plaza-sky span:nth-child(2) { margin-top:16px; color:var(--gold); font-size:18px; }
.pet-plaza-summary { position:absolute; left:16px; top:14px; z-index:12; display:flex; flex-direction:column; gap:2px; max-width:min(270px,calc(100% - 32px)); padding:10px 12px; border:1px solid color-mix(in srgb,var(--line) 70%,transparent); border-radius:var(--radius-card); background:color-mix(in srgb,var(--panel) 82%,transparent); backdrop-filter:blur(10px); box-shadow:0 10px 26px rgba(0,0,0,.14); }
.pet-plaza-summary strong { font-size:13px; color:var(--accent2); }
.pet-plaza-summary span { color:var(--muted); font-size:11px; font-weight:700; }
.pet-plaza-scenery { position:absolute; pointer-events:none; }
.pet-plaza-tree { left:7%; top:30%; width:70px; height:95px; background:#7f5b35; border:4px solid #573d32; border-radius:8px; z-index:1; }
.pet-plaza-tree::before { content:''; position:absolute; left:-31px; top:-59px; width:124px; height:86px; background:#5ca85d; border:4px solid #32643a; border-radius:50% 50% 42% 42%; box-shadow:22px 19px 0 #75bd68; }
.pet-plaza-sign { left:18%; top:47%; z-index:2; width:82px; padding:7px 5px; background:#bd8650; border:4px solid #573d32; border-radius:8px; color:#fff2c7; font-size:10px; font-weight:900; letter-spacing:.06em; text-align:center; box-shadow:0 16px 0 -10px #573d32; }
.pet-plaza-sign::before,.pet-plaza-sign::after { content:''; position:absolute; bottom:-30px; width:7px; height:30px; background:#573d32; }
.pet-plaza-sign::before { left:16px; }
.pet-plaza-sign::after { right:16px; }
.pet-plaza-pond { left:8%; bottom:8%; width:130px; height:54px; z-index:1; background:#78c6e0; border:4px solid #42758a; border-radius:50%; opacity:.9; box-shadow:inset -22px -12px 0 #4e9fc2,inset 18px 10px 0 rgba(255,255,255,.34); }
.pet-plaza-pond::before { content:''; position:absolute; left:18px; top:15px; width:32px; height:6px; border-radius:var(--radius-chip); background:rgba(255,255,255,.55); box-shadow:52px 12px 0 rgba(255,255,255,.38); }
.pet-plaza-flowers { width:8px; height:8px; z-index:2; border-radius:50%; background:#ff8aa8; box-shadow:13px 0 0 #ff8aa8,26px 1px 0 #ffd65c,39px 0 0 #ff8aa8,52px 1px 0 #ffd65c,8px 10px 0 #ffd65c,22px 11px 0 #ff8aa8,36px 10px 0 #ffd65c,50px 11px 0 #ff8aa8; }
.pet-plaza-flowers-left { left:28%; top:58%; }
.pet-plaza-flowers-right { right:20%; top:63%; transform:scale(.85); }
.pet-plaza-fountain { left:48%; top:42%; width:92px; height:50px; transform:translateX(-50%); border:5px solid #6689a5; border-top:0; border-radius:0 0 10px 10px; background:#a9d7e8; z-index:1; }
.pet-plaza-fountain::before { content:''; position:absolute; left:36px; top:-46px; width:16px; height:48px; border-radius:50%; background:#d7f7ff; box-shadow:-21px 12px 0 -4px #d7f7ff,22px 13px 0 -4px #d7f7ff; opacity:.85; }
.pet-plaza-bench { right:9%; top:47%; width:112px; height:36px; border-top:12px solid #9a6540; border-bottom:10px solid #9a6540; z-index:1; }
.pet-plaza-bench::before,.pet-plaza-bench::after { content:''; position:absolute; bottom:-26px; width:9px; height:28px; background:#573d32; }
.pet-plaza-bench::before { left:18px; }
.pet-plaza-bench::after { right:18px; }
.pet-plaza-path { position:absolute; left:50%; bottom:-62px; width:72%; height:190px; transform:translateX(-50%); background:color-mix(in srgb,#d8b889 58%,var(--bg)); border:1px solid color-mix(in srgb,#9c7647 55%,var(--line)); border-radius:50% 50% 0 0; opacity:.82; pointer-events:none; }
.pet-plaza-resident { position:absolute; left:var(--x); top:var(--y); z-index:var(--z); width:128px; min-height:152px; transform:translate(-50%,-50%) scale(var(--s,1)); padding:0; border:0; background:transparent; color:var(--text); text-align:center; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; filter:drop-shadow(0 8px 12px rgba(0,0,0,.16)); transition:filter .18s ease; }
.pet-plaza-resident:hover,.pet-plaza-resident.active { filter:drop-shadow(0 0 10px color-mix(in srgb,var(--accent2) 38%,transparent)) drop-shadow(0 8px 12px rgba(0,0,0,.16)); }
.pet-plaza-resident:hover:not(:disabled),.pet-plaza-resident:active:not(:disabled) { transform:translate(-50%,-50%) scale(var(--s,1)); filter:drop-shadow(0 0 10px color-mix(in srgb,var(--accent2) 38%,transparent)) drop-shadow(0 8px 12px rgba(0,0,0,.16)); }
.pet-plaza-resident.active .pet-plaza-name { color:var(--on-accent); background:var(--accent); border-color:var(--accent); }
.pet-plaza-resident.online::before { content:''; position:absolute; top:42px; width:74px; height:74px; border-radius:50%; background:color-mix(in srgb,var(--accent2) 16%,transparent); animation:pet-plaza-pulse 1.8s ease-in-out infinite; }
.pet-plaza-mini-stage,.pet-plaza-detail-stage { background:transparent; box-shadow:none; outline:0; }
.pet-plaza-mini-stage { flex:0 0 96px; width:118px; height:96px; overflow:visible; border:0; border-radius:0; }
.pet-plaza-mini-stage::before,.pet-plaza-detail-stage::before { display:none; }
.pet-plaza-mini-stage .pixel-pet { top:0; transform:translateX(-50%) scale(.43); transform-origin:top center; animation:none; }
.pet-plaza-mini-stage .pixel-pet *,.pet-plaza-detail-stage .pixel-pet,.pet-plaza-detail-stage .pixel-pet * { animation:none; transition:none; }
.pet-plaza-mini-stage .pet-head,.pet-plaza-mini-stage .pet-body,.pet-plaza-mini-stage .pet-tail,.pet-plaza-mini-stage .pet-ear,.pet-plaza-mini-stage .pet-body::before,.pet-plaza-mini-stage .pet-body::after,.pet-plaza-mini-stage .pet-head::before,.pet-plaza-mini-stage .pet-head::after,.pet-plaza-detail-stage .pet-head,.pet-plaza-detail-stage .pet-body,.pet-plaza-detail-stage .pet-tail,.pet-plaza-detail-stage .pet-ear { border-color:rgba(87,61,50,.32); }
.pet-plaza-mini-stage .pet-eye,.pet-plaza-mini-stage .pet-nose,.pet-plaza-detail-stage .pet-eye,.pet-plaza-detail-stage .pet-nose { filter:saturate(.9) brightness(1.08); }
.pet-plaza-mini-stage[data-action='work']::after,.pet-plaza-mini-stage[data-action='feed']::after,.pet-plaza-mini-stage[data-action='play']::after,.pet-plaza-mini-stage[data-action='interact']::after,.pet-plaza-mini-stage[data-action='upgrade']::after { content:''; position:absolute; z-index:0; pointer-events:none; }
.pet-plaza-mini-stage[data-action='work']::after { right:5px; bottom:5px; width:34px; height:23px; border:2px solid rgba(104,137,156,.38); border-top:0; border-radius:0 0 10px 10px; background:#bfe7f2; box-shadow:-9px -14px 0 -7px #dff9ff, 8px -18px 0 -8px #dff9ff; }
.pet-plaza-mini-stage[data-action='feed']::after { left:14px; bottom:5px; width:34px; height:14px; border:2px solid rgba(215,221,229,.55); border-radius:50%; background:#fff; box-shadow:0 7px 0 -2px rgba(138,91,56,.36); }
.pet-plaza-mini-stage[data-action='play']::after { left:14px; bottom:14px; width:21px; height:21px; border:2px solid rgba(36,77,125,.42); border-radius:50%; background:#65a9ed; }
.pet-plaza-mini-stage[data-action='interact']::after { right:16px; top:14px; width:10px; height:10px; color:#ff7fa8; content:'♥'; font-size:18px; text-shadow:-22px 5px #ffadc7; }
.pet-plaza-mini-stage[data-action='upgrade']::after { left:18px; top:12px; width:8px; height:8px; background:var(--gold); box-shadow:28px -8px 0 #fff3a3,64px 8px 0 var(--accent2),86px -2px 0 #ffd86a; animation:pet-sparkle 1.1s ease-in-out infinite; }
.pet-plaza-name { position:relative; max-width:120px; padding:4px 8px; border:1px solid color-mix(in srgb,var(--line) 75%,transparent); border-radius:var(--radius-chip); background:color-mix(in srgb,var(--panel) 82%,transparent); backdrop-filter:blur(6px); font-size:12px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pet-plaza-meta,.pet-plaza-mood { position:relative; max-width:126px; color:var(--muted); font-size:10px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.86; }
.pet-plaza-mood { opacity:0; transform:translateY(-3px); transition:opacity .18s ease,transform .18s ease; }
.pet-plaza-resident:hover .pet-plaza-mood,.pet-plaza-resident.active .pet-plaza-mood { opacity:1; transform:translateY(0); }
.pet-plaza-detail { padding:12px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--bg); display:flex; flex-direction:column; gap:10px; }
.pet-plaza-detail-head { display:grid; grid-template-columns:58px 1fr auto; align-items:center; gap:10px; }
.pet-plaza-detail-head > span:nth-child(2) { min-width:0; display:flex; flex-direction:column; gap:2px; }
.pet-plaza-detail-stage { width:54px; height:48px; overflow:visible; background:transparent; border:0; }
.pet-plaza-detail-stage .pixel-pet { top:0; transform:translateX(-50%) scale(.22); transform-origin:top center; }
.pet-plaza-detail-note { padding:9px 11px; border:1px solid color-mix(in srgb,var(--accent2) 26%,var(--line)); border-radius:var(--radius-card); color:var(--muted); background:color-mix(in srgb,var(--accent2) 8%,var(--bg)); font-size:12px; font-weight:700; }
.pet-plaza-visit-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.pet-plaza-visit-actions button { flex:1 1 128px; min-height:44px; }
.pet-plaza-stats { grid-template-columns:repeat(2,1fr); }
@keyframes pet-plaza-pulse { 0%,100% { transform:scale(.8); opacity:.4; } 50% { transform:scale(1.12); opacity:.75; } }
.mail-request-box { border-top:1px solid var(--line); padding:12px; }
.feedback-read-row { display:flex; gap:8px; margin-top:8px; }
.feedback-read-row input { min-width:0; }
.pill-miniadmin { color:var(--admin-accent); border-color:color-mix(in srgb,var(--admin-accent) 45%,transparent); }
.status-card,.messages-card { overflow:hidden; }
.messages-card { height:calc(100dvh - 150px); min-height:520px; display:flex; flex-direction:column; }
.status-body { padding:18px 16px; display:flex; flex-direction:column; gap:14px; }
.status-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.status-item { background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-card); padding:12px; display:flex; flex-direction:column; gap:6px; }
.status-item span { color:var(--muted); font-size:12px; }
.status-item strong { font-size:20px; color:var(--accent2); font-variant-numeric:tabular-nums; }
.status-service-list .row-item-main { gap:2px; }
.dm-layout { flex:1; min-height:0; display:grid; grid-template-columns:170px 1fr; }
.dm-contacts { border-right:1px solid var(--line); padding:12px; display:flex; flex-direction:column; gap:8px; overflow:auto; }
.dm-contact { min-height:52px; padding:10px; border-radius:var(--radius-card); background:var(--bg); border:1px solid var(--line); color:var(--text); text-align:left; display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.dm-contact.active { border-color:var(--accent2); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent2) 35%,transparent); }
.dm-contact strong { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.dm-contact em { min-width:18px; height:18px; padding:0 5px; border-radius:var(--radius-chip); display:inline-flex; align-items:center; justify-content:center; background:var(--danger); color:#fffaf2; font-size:11px; font-style:normal; font-weight:900; }
.dm-contact span { color:var(--muted); font-size:12px; font-weight:500; }
.dm-thread { min-width:0; display:flex; flex-direction:column; }
.dm-list { padding-top:14px; }
.dm-message { display:flex; flex-direction:column; gap:4px; max-width:82%; }
.dm-message.mine { align-self:flex-end; align-items:flex-end; }
.dm-message.theirs { align-self:flex-start; align-items:flex-start; }
.dm-message-meta { display:flex; align-items:center; gap:8px; padding:0 6px; color:var(--muted); font-size:11px; line-height:1.2; }
.dm-message-meta time { opacity:.72; font-variant-numeric:tabular-nums; }
.dm-bubble { padding:11px 13px; border-radius:var(--radius-card); line-height:1.62; word-break:break-word; white-space:pre-wrap; box-shadow:0 8px 22px rgba(0,0,0,.16); }
.dm-message.theirs .dm-bubble { border-top-left-radius:7px; background:color-mix(in srgb,var(--panel) 82%,var(--bg)); border:1px solid var(--line); color:var(--text); }
.dm-message.mine .dm-bubble { border-top-right-radius:7px; background:var(--card); color:#fff; }
.dm-empty { margin:auto; color:var(--muted); font-size:13px; }
.site-settings { display:flex; flex-direction:column; gap:9px; padding:12px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-card); }
.site-settings .full { margin:2px 0 0; }
.admin-site-stats { padding-top:2px; font-variant-numeric:tabular-nums; }
.admin-row { display:flex; gap:8px; margin-bottom:8px; }
.admin-row select { width:auto; min-width:96px; }
select { border:1px solid var(--line); border-radius:var(--radius-control); background:var(--bg); color:var(--text); padding:12px 10px; font:inherit; outline:none; transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; }
select:focus { border-color:var(--accent2); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent2) 22%,transparent); }
.chk { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:14px; white-space:nowrap; }
.chk input { width:auto; accent-color:var(--accent); }
.full { width:100%; margin-bottom:6px; }
.admin-list { display:flex; flex-direction:column; gap:8px; }
.empty { color:var(--muted); font-size:13px; margin:4px 0; }
.row-item { display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-card); padding:10px 12px; transition:border-color .18s ease,background .18s ease; }
.row-item:hover { border-color:color-mix(in srgb,var(--accent2) 45%,var(--line)); }
.row-item-main { display:flex; flex-direction:column; gap:3px; min-width:0; overflow:hidden; }
.row-item-actions { display:flex; gap:6px; flex:0 0 auto; }
.row-item-actions button { min-height:44px; padding:0 12px; }
.code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--ok); font-size:13px; }
.pill { font-size:11px; color:var(--muted); border:1px solid var(--line); padding:1px 7px; border-radius:var(--radius-chip); margin-left:6px; }
.pill-admin { color:var(--admin-warn); border-color:color-mix(in srgb,var(--admin-warn) 45%,transparent); }
.small-text { font-size:12px; }
.plaza-list { padding-top:14px; }
.plaza-post { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-card); padding:10px 14px; }
.plaza-post.pending { border-color:color-mix(in srgb,var(--gold) 45%,var(--line)); }
.plaza-filters { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; margin:-6px 0 8px; }
.plaza-filter.active { color:var(--on-accent); border-color:var(--accent); background:var(--accent); }
.plaza-meta { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:4px; }
.plaza-meta strong { font-size:13px; color:var(--accent2); }
.plaza-text { line-height:1.55; white-space:pre-wrap; word-break:break-word; }
.plaza-actions { display:flex; justify-content:flex-end; gap:6px; margin-top:6px; }
.plaza-actions button { min-height:44px; padding:0 12px; font-size:12px; }
.plaza-reply-list { display:flex; flex-direction:column; gap:6px; margin-top:9px; padding-left:12px; border-left:2px solid color-mix(in srgb,var(--accent2) 28%,var(--line)); }
.plaza-reply { display:flex; flex-direction:column; gap:2px; padding:7px 9px; border:1px solid color-mix(in srgb,var(--line) 70%,transparent); border-radius:var(--radius-card); background:color-mix(in srgb,var(--panel) 38%,transparent); }
.plaza-reply strong { color:var(--accent2); font-size:12px; }
.plaza-reply span { line-height:1.45; overflow-wrap:anywhere; }
.plaza-reply-form { display:flex; gap:7px; margin-top:8px; }
.plaza-reply-form input { min-height:44px; padding:10px 12px; font-size:13px; }
.plaza-reply-form button { min-height:44px; flex:0 0 auto; }
.plaza-reactions { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.plaza-react { min-height:44px; padding:0 12px; font-size:12px; border-radius:var(--radius-chip); }
.plaza-react.active { color:var(--on-accent); background:var(--accent); border-color:var(--accent); }
.anon-chk { font-size:13px; padding-bottom:12px; white-space:nowrap; }
.anon-chk input { width:auto; accent-color:var(--accent); }
.plaza-real { margin-top:4px; font-size:12px; color:var(--muted); }
.draw-body { padding:16px 14px; display:flex; flex-direction:column; gap:14px; }
.draw-actions { display:flex; }
.draw-actions button { flex:1; }
.draw-list { gap:8px; }
.draw-item { align-items:stretch; padding:0; overflow:hidden; }
.draw-item.row-item-active { border-color:var(--accent2); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent2) 40%,transparent),0 8px 22px rgba(0,0,0,.2); }
.draw-select { flex:1; text-align:left; background:transparent; color:var(--text); border:0; border-radius:0; min-height:0; display:flex; flex-direction:column; gap:4px; padding:10px 12px; }
.draw-select strong { color:var(--text); }
.draw-del { align-self:center; margin-right:8px; min-height:44px; }
.draw-stage { border:1px solid var(--line); border-radius:var(--radius-card); overflow:hidden; display:flex; flex-direction:column; }
.draw-stage-top { padding:10px 12px; }
.draw-stage-top strong { color:var(--text); }
.draw-word { display:flex; flex-wrap:wrap; gap:8px; padding:12px; }
.draw-word p { flex-basis:100%; margin:0 0 4px; }
.draw-word-btn { min-height:44px; flex:1 1 auto; min-width:86px; }
.draw-canvas-wrap { padding:0 12px 12px; display:flex; flex-direction:column; gap:10px; }
.draw-canvas-wrap canvas { width:100%; height:auto; background:#fff; border:1px solid var(--line); border-radius:var(--radius-card); touch-action:none; box-shadow:0 10px 26px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.03); }
.draw-canvas-wrap .row { justify-content:flex-end; }
.draw-canvas-wrap .row button { flex:0 0 auto; }
.draw-guess { padding:12px; }
.draw-guess button { flex:0 0 auto; }
.draw-image { padding:12px; }
.draw-image img { max-width:100%; border:1px solid var(--line); border-radius:var(--radius-card); display:block; }
.draw-result { padding:12px; display:flex; flex-direction:column; gap:6px; }
.draw-result p { margin:0; line-height:1.5; }
.draw-target { color:var(--accent); }
.draw-good { color:var(--ok); }
.draw-waiting { padding:12px; margin:0; color:var(--muted); }
.draw-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.lb-list { gap:8px; }
.lb-item { align-items:center; }
.lb-rank { flex:0 0 auto; min-width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-control); font-weight:700; font-size:14px; background:var(--panel); border:1px solid var(--line); color:var(--muted); }
.lb-main { flex:1; min-width:0; }
.lb-score { flex:0 0 auto; font-weight:700; color:var(--accent2); font-variant-numeric:tabular-nums; }
.lb-first .lb-rank { color:var(--on-accent); background:var(--accent); border-color:var(--accent); }
.lb-second .lb-rank { color:var(--on-accent); background:var(--gold); border-color:var(--gold); }
.lb-third .lb-rank { color:var(--on-accent); background:var(--gold2); border-color:var(--gold2); }
.lb-head { margin:8px 0 2px; font-weight:700; font-size:13px; color:var(--accent2); }
.stage-lb { gap:6px; }
.stage-lb .lb-item { padding:8px 10px; }
.lb-group { display:flex; flex-direction:column; gap:10px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-card); padding:12px 14px; }
.lb-group:hover { border-color:color-mix(in srgb,var(--accent2) 45%,var(--line)); }
.lb-group-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.lb-group-head strong { color:var(--text); }
.lb-group-head .pill { margin-left:0; }
.lb-answer { color:var(--muted); font-size:13px; }
.lb-answer strong { color:var(--accent); }
.lb-group-body { display:flex; flex-direction:column; gap:6px; }
.lb-empty { margin:0; color:var(--muted); font-size:13px; padding:2px 0; }
.draw-reveal { align-self:flex-start; min-height:44px; }
.announce-block { margin-top:18px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--bg); padding:12px 14px; }
.announce-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:10px; }
.announce-head strong { color:var(--accent2); font-size:15px; }
.announce-list { display:flex; flex-direction:column; gap:8px; }
.announce-post { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-card); padding:10px 12px; }
.announce-meta { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:4px; }
.announce-meta strong { font-size:13px; color:var(--accent2); }
.announce-text { line-height:1.55; white-space:pre-wrap; word-break:break-word; }
.announce-form { display:flex; gap:8px; margin-top:12px; align-items:stretch; }
.announce-form input { flex:1; }
.announce-form button { flex:0 0 auto; }
.snake-card { overflow:hidden; }
.snake-body { padding:16px 14px; display:flex; flex-direction:column; gap:14px; align-items:center; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.snake-stats { display:flex; gap:18px; width:100%; justify-content:center; }
.snake-stat { color:var(--muted); font-size:13px; letter-spacing:.05em; }
.snake-stat strong { color:var(--accent2); font-variant-numeric:tabular-nums; margin-left:6px; }
.snake-screen { width:min(320px,100%); background:#05070c; border:2px solid color-mix(in srgb,var(--accent) 70%,transparent); border-radius:var(--radius-card); box-shadow:0 0 18px color-mix(in srgb,var(--accent) 35%,transparent),inset 0 0 22px rgba(0,0,0,.65); padding:6px; }
.snake-screen canvas { display:block; width:100%; height:auto; image-rendering:pixelated; background:#05070c; }
.snake-controls { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.snake-controls button { font-family:inherit; }
.snake-speed-label { min-height:44px; display:flex; align-items:center; gap:7px; padding:0 12px; border:1px solid var(--line); border-radius:var(--radius-control); color:var(--muted); background:var(--bg); font-size:12px; font-weight:800; }
.snake-speed-label select { width:auto; min-width:78px; min-height:44px; padding:8px 10px; border-radius:var(--radius-control); font-size:12px; }
.snake-dpad { display:flex; flex-direction:column; align-items:center; gap:6px; }
.snake-dpad-grid { display:grid; grid-template-columns:repeat(3, 56px); grid-template-rows:repeat(3, 56px); gap:6px; }
.snake-dpad-cell { width:56px; height:56px; }
.snake-dpad-center { width:56px; height:56px; }
.snake-dir { width:56px; height:56px; min-height:0; padding:0; font-size:18px; line-height:1; background:var(--bg); color:var(--accent2); border:1px solid var(--line); border-radius:var(--radius-control); }
.snake-dir:hover:not(:disabled) { border-color:var(--accent2); box-shadow:0 0 10px color-mix(in srgb,var(--accent2) 35%,transparent); }
.snake-dir:active:not(:disabled) { transform:translateY(1px); }
#snakeMsg { text-align:center; }
.snake-leaderboard { width:min(430px,100%); border-top:1px solid var(--line); padding-top:14px; display:flex; flex-direction:column; gap:8px; }
.snake-leaderboard-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.snake-leaderboard-head strong { color:var(--accent2); font-size:15px; }
.snake-leaderboard-head button { min-height:44px; }
.snake-leaderboard-list { width:100%; gap:8px; }
.snake-lb-item { padding:8px 10px; }
.snake-lb-item .lb-main { display:flex; flex-direction:column; gap:2px; }
.snake-lb-me { border-color:color-mix(in srgb,var(--accent2) 55%,var(--line)); }
.snake-screen.game-over { border-color:color-mix(in srgb,var(--danger) 72%,transparent); box-shadow:0 0 22px rgba(var(--danger-rgb),.30),inset 0 0 22px rgba(0,0,0,.65); }
.snake-screen.paused { filter:saturate(.55) brightness(.82); }
.snake-screen.paused canvas { animation:snake-dim .2s ease; }
@keyframes snake-dim { from { opacity:.5; } to { opacity:1; } }
.tank-card { overflow:hidden; }
.tank-body { padding:16px 14px; display:flex; flex-direction:column; gap:14px; align-items:center; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.tank-stats { display:flex; gap:12px; width:100%; justify-content:center; flex-wrap:wrap; }
.tank-stat { color:var(--muted); font-size:13px; letter-spacing:.05em; }
.tank-stat strong { color:var(--accent2); font-variant-numeric:tabular-nums; margin-left:6px; }
.tank-damage-hint { width:min(360px,100%); padding:9px 11px; border:1px solid color-mix(in srgb,var(--accent2) 34%,transparent); border-radius:var(--radius-card); background:color-mix(in srgb,var(--accent2) 8%,var(--card)); color:var(--muted); font-size:12px; line-height:1.55; text-align:center; }
.tank-screen { position:relative; width:min(360px,100%); background:#05070c; border:2px solid color-mix(in srgb,var(--accent2) 70%,transparent); border-radius:var(--radius-card); box-shadow:0 0 18px color-mix(in srgb,var(--accent2) 30%,transparent),inset 0 0 22px rgba(0,0,0,.65); padding:6px; overflow:hidden; }
.tank-screen canvas { display:block; width:100%; height:auto; image-rendering:pixelated; background:#071018; }
.tank-controls { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.tank-upgrade-panel { position:absolute; inset:14px; z-index:8; display:flex; flex-direction:column; gap:10px; align-items:stretch; justify-content:center; padding:14px; border:1px solid color-mix(in srgb,var(--gold) 54%,var(--line)); border-radius:var(--radius-card); background:rgba(14,24,38,.96); box-shadow:0 20px 44px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter:blur(10px); text-align:left; }
.tank-upgrade-panel h4 { margin:0; color:var(--gold); font-size:15px; letter-spacing:.04em; }
.tank-upgrade-panel p { margin:0; color:var(--muted); font-size:12px; line-height:1.45; }
.tank-upgrade-options { display:grid; gap:8px; }
.tank-upgrade-options button { min-height:48px; padding:8px 10px; justify-content:flex-start; text-align:left; border:1px solid color-mix(in srgb,var(--accent2) 34%,var(--line)); border-radius:var(--radius-control); background:color-mix(in srgb,var(--panel) 62%,transparent); color:var(--text); box-shadow:none; }
.tank-upgrade-options button:hover:not(:disabled) { border-color:var(--gold); filter:none; transform:translateY(-1px); box-shadow:0 12px 22px rgba(0,0,0,.18); }
.tank-ability-row { width:min(360px,100%); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:9px; border:1px solid color-mix(in srgb,var(--accent2) 24%,var(--line-soft)); border-radius:var(--radius-card); background:color-mix(in srgb,var(--bg) 62%,transparent); }
.tank-ability-row button { min-height:44px; font-family:inherit; font-size:12px; white-space:normal; line-height:1.2; }
.tank-ability-row button:not(:disabled) { color:var(--accent2); border-color:color-mix(in srgb,var(--accent2) 45%,var(--line)); box-shadow:0 0 16px color-mix(in srgb,var(--accent2) 15%,transparent); }
.tank-controls button { font-family:inherit; }
.tank-controls .tank-fire-main { min-width:120px; box-shadow:0 0 0 1px color-mix(in srgb,var(--accent2) 45%,transparent),0 10px 28px color-mix(in srgb,var(--accent2) 18%,transparent); }
.tank-controls .tank-fire-main:disabled,.tank-fire-pad:disabled { opacity:.55; cursor:not-allowed; filter:saturate(.75); }
.tank-fire-pad { color:#201500; background:#e8a84c; border-color:rgba(255,210,80,.75); }
.tank-dpad .snake-dpad-center { display:grid; place-items:center; color:var(--muted); border:1px dashed var(--line); border-radius:var(--radius-control); }
#tankMsg { text-align:center; }
.gomoku-card { overflow:hidden; }
.gomoku-body { padding:16px 14px; display:flex; flex-direction:column; gap:14px; }
.gomoku-lobby { display:flex; flex-direction:column; gap:12px; }
.gomoku-create { display:flex; flex-direction:column; gap:8px; padding:12px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-card); }
.gomoku-create-row { display:flex; gap:8px; flex-wrap:wrap; }
.gomoku-create-row button { flex:1 1 140px; }
.gomoku-join .row { align-items:stretch; }
.gomoku-join input { flex:1; }
.gomoku-list { gap:8px; }
.gomoku-item strong { font-size:14px; }
.gomoku-stage { display:flex; flex-direction:column; gap:12px; }
.gomoku-stage-head { display:flex; flex-direction:column; gap:8px; padding:12px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-card); }
.gomoku-players { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; font-weight:700; }
.gomoku-player { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:var(--radius-chip); border:1px solid transparent; }
.gomoku-player.active { border-color:var(--accent2); background:color-mix(in srgb,var(--accent2) 14%,transparent); color:var(--accent2); }
.gomoku-stone { width:14px; height:14px; border-radius:50%; display:inline-block; border:1px solid rgba(0,0,0,.25); box-shadow:0 1px 3px rgba(0,0,0,.3); }
.gomoku-stone.black-mini { background:#111; box-shadow:inset 3px 3px 0 rgba(255,255,255,.18),0 1px 3px rgba(0,0,0,.3); }
.gomoku-stone.white-mini { background:#f2f2f2; border-color:rgba(0,0,0,.15); box-shadow:inset -3px -3px 0 #d8d8d8,0 1px 3px rgba(0,0,0,.3); }
.gomoku-meta { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.gomoku-meta .pill { font-size:11px; }
.gomoku-meta .gomoku-win { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.gomoku-room-row { display:flex; align-items:center; gap:8px; justify-content:center; flex-wrap:wrap; }
.gomoku-board-wrap { display:flex; justify-content:center; padding:8px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-card); }
.gomoku-board { width:min(100%, 480px); aspect-ratio:1; display:grid; grid-template-columns:repeat(15, 1fr); grid-template-rows:repeat(15, 1fr); background:#dcb87a; border:2px solid #a67c3a; border-radius:8px; overflow:hidden; box-shadow:0 10px 26px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.18); }
.gomoku-cell { position:relative; width:100%; height:100%; min-height:0; padding:0; border-radius:0; background:#e8c998; border:0; border-right:1px solid #b8935f; border-bottom:1px solid #b8935f; cursor:pointer; }
.gomoku-cell:nth-child(15n) { border-right:0; }
.gomoku-cell:nth-last-child(-n+15) { border-bottom:0; }
.gomoku-cell:disabled { cursor:default; opacity:1; }
.gomoku-cell.star::before { content:''; position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px 0 0 -3px; background:#6b4a1f; border-radius:50%; pointer-events:none; }
.gomoku-cell.black::after, .gomoku-cell.white::after { content:''; position:absolute; inset:12%; border-radius:50%; box-shadow:0 2px 6px rgba(0,0,0,.45), inset 0 1px 2px rgba(255,255,255,.4); }
.gomoku-cell.black::after { background:#111; border:1px solid #000; box-shadow:0 2px 6px rgba(0,0,0,.45),inset 8px 8px 0 rgba(255,255,255,.12); }
.gomoku-cell.white::after { background:#f2f2f2; border:1px solid #b8b8b8; box-shadow:0 2px 6px rgba(0,0,0,.35),inset -9px -9px 0 #d6d6d6; }
.gomoku-board.gomoku-turn .gomoku-cell:not(.black):not(.white):not(:disabled):hover { background:#f0d9a8; }
.gomoku-board.gomoku-turn .gomoku-cell:not(.black):not(.white):hover::after { content:''; position:absolute; inset:22%; border-radius:50%; background:rgba(0,0,0,.18); border:1px dashed rgba(0,0,0,.25); }
.gomoku-result { margin:0; text-align:center; font-weight:800; color:var(--accent); background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-card); padding:10px 12px; }
.gomoku-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.gomoku-actions button { flex:0 0 auto; }
@media (max-width:560px) { .app{padding:16px 12px max(16px,env(safe-area-inset-bottom));} h1{font-size:30px;} .row,.tiles{grid-template-columns:1fr; flex-direction:column;} .hero{flex-direction:column; align-items:stretch; gap:14px;} .hero-side{width:100%; flex-direction:column; align-items:flex-end; justify-content:flex-start;} .chat-card{height:calc(100dvh - 138px); min-height:460px;} .bubble{max-width:92%;} .status-grid{grid-template-columns:1fr;} .dm-layout{grid-template-columns:1fr;} .dm-contacts{border-right:0;border-bottom:1px solid var(--line); flex-direction:row; overflow-x:auto;} .dm-contact{min-width:138px;} .preview-panel,.pet-plaza-stats,.review-center{grid-template-columns:1fr;} .feedback-read-row{flex-direction:column;} .admin-row{flex-wrap:wrap;} .admin-row select{flex:1;} .announce-form{flex-direction:column;} .announce-form button{width:100%;} .profile-form,.profile-form-stack{display:flex; flex-direction:column;} .profile-form button,.profile-form-stack button{width:100%;} .profile-section-head{align-items:flex-start; flex-direction:column; gap:4px;} .pet-stats{grid-template-columns:repeat(2,1fr);} .pet-stat:nth-child(3){border-left:0;border-top:1px solid var(--line);} .pet-stat:nth-child(4){border-top:1px solid var(--line);} .pet-shop-item{grid-template-columns:40px 1fr auto;} .pet-shop-icon{width:40px;height:40px;} .custom-pet-card{grid-template-columns:70px 1fr;} .custom-pet-preview{width:70px;height:70px;} .custom-pet-card button{grid-column:1 / -1;width:100%;} .gomoku-board{width:100%;} .gomoku-create-row{flex-direction:column;} .gomoku-create-row button{width:100%;} }
@media (max-width:560px) {
.pet-plaza-field { min-height:560px; }
.pet-plaza-resident { width:108px; --mobile-plaza-scale:calc(var(--s,1) * .9); transform:translate(-50%,-50%) scale(var(--mobile-plaza-scale)); }
.pet-plaza-resident:hover:not(:disabled),.pet-plaza-resident:active:not(:disabled) { transform:translate(-50%,-50%) scale(var(--mobile-plaza-scale)); }
.pet-plaza-tree,.pet-plaza-sign,.pet-plaza-pond,.pet-plaza-bench,.pet-plaza-flowers { transform:scale(.8); transform-origin:center bottom; }
.pet-plaza-fountain { transform:translateX(-50%) scale(.8); }
.pet-plaza-flowers-right { transform:scale(.68); }
.pet-plaza-tree { left:2%; }
.pet-plaza-bench { right:1%; }
.pet-plaza-detail-head { grid-template-columns:54px 1fr; }
.pet-plaza-detail-head button { grid-column:1 / -1; width:100%; }
}
/* ===== 2026 UI 重构：社区 App 化视觉层 ===== */
:root {
--surface-glass: rgba(var(--card-rgb), .78);
--surface-soft: color-mix(in srgb, var(--panel) 76%, transparent);
--line-soft: color-mix(in srgb, var(--line) 72%, transparent);
--shadow-lg: 0 24px 70px rgba(0,0,0,.34);
--shadow-md: 0 14px 38px rgba(0,0,0,.22);
--radius-xl:10px;
--radius-lg:10px;
--radius-md:6px;
}
html { scroll-behavior:smooth; }
body {
background:var(--bg);
letter-spacing:.01em;
}
body::before {
content:'';
position:fixed;
inset:0;
pointer-events:none;
background:none;
background-size:44px 44px;
mask-image:none;
}
.app { width:min(1040px,100%); padding:28px 18px max(30px,env(safe-area-inset-bottom)); }
.hero {
position:relative;
align-items:stretch;
margin:8px 0 18px;
padding:22px;
border:1px solid var(--line-soft);
border-radius:var(--radius-xl);
background:var(--card);
box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.06);
overflow:hidden;
backdrop-filter:blur(18px);
}
.hero::after {
content:'';
position:absolute;
right:-88px;
top:-110px;
width:280px;
height:280px;
border-radius:var(--radius-chip);
background:none;
pointer-events:none;
}
.hero > div:first-child { position:relative; z-index:1; max-width:640px; }
.eyebrow { color:var(--accent2); font-weight:900; }
h1 { font-size:56px; letter-spacing:0; max-width:720px; }
.sub { max-width:680px; font-size:15px; }
.hero-side { position:relative; z-index:2; min-width:210px; justify-content:space-between; }
.theme-switch { width:100%; align-items:flex-end; }
.theme-swatches { border-radius:var(--radius-card); box-shadow:0 10px 26px rgba(0,0,0,.18); }
#logoutBtn { border-radius:var(--radius-chip); }
.card {
border-radius:var(--radius-xl);
background:var(--card);
border:1px solid var(--line-soft);
box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.05);
backdrop-filter:blur(18px);
}
.login-card,.home-card { padding:24px; }
.login-card { max-width:620px; margin:0 auto; }
.tabs { border-radius:var(--radius-card); padding:5px; }
.tab { border-radius:var(--radius-control); }
button { border-radius:var(--radius-control); box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 18%,transparent); }
button:hover:not(:disabled) { transform:translateY(-1px); }
button:active:not(:disabled) { transform:translateY(1px) scale(.99); }
.ghost { box-shadow:none; background:color-mix(in srgb,var(--panel) 34%,transparent); }
input, textarea, select { border-radius:var(--radius-control); background:color-mix(in srgb,var(--bg) 82%,transparent); }
.home-card { position:relative; overflow:hidden; }
.home-card::before {
content:'';
position:absolute;
inset:0 0 auto;
height:170px;
background:none;
pointer-events:none;
}
.home-top { position:relative; z-index:1; align-items:center; margin-bottom:18px; padding:18px; border:1px solid var(--line-soft); border-radius:var(--radius-card); background:color-mix(in srgb,var(--panel) 42%,transparent); }
.home-top h2 { font-size:36px; letter-spacing:0; }
.home-top .muted { font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:11px; }
.home-top-right { gap:10px; }
.badge,.changelog-btn,.pill { backdrop-filter:blur(8px); }
.site-stats { padding:6px 8px; border:1px solid var(--line-soft); border-radius:var(--radius-chip); background:color-mix(in srgb,var(--bg) 52%,transparent); }
.changelog-panel { position:relative; z-index:2; border-radius:var(--radius-card); }
.home-filters { position:relative; z-index:2; display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px; padding:7px; border:1px solid var(--line-soft); border-radius:var(--radius-card); background:color-mix(in srgb,var(--bg) 54%,transparent); backdrop-filter:blur(12px); }
.home-filter { flex:0 0 auto; min-height:44px; padding:0 14px; border-radius:var(--radius-chip); background:transparent; color:var(--muted); border:1px solid transparent; box-shadow:none; font-size:13px; }
.home-filter:hover:not(:disabled) { color:var(--text); border-color:var(--line-soft); transform:none; filter:none; }
.home-filter.active { color:var(--on-accent); background:var(--accent); box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 20%,transparent); }
.home-filter.filter-jump-feedback { animation:filter-jump-feedback .34s ease both; }
@keyframes filter-jump-feedback {
0% { box-shadow:0 0 0 0 color-mix(in srgb,var(--accent2) 36%,transparent); }
55% { box-shadow:0 0 0 5px color-mix(in srgb,var(--accent2) 18%,transparent); }
100% { box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 20%,transparent); }
}
.home-filter-hidden { display:none !important; }
.tiles { position:relative; z-index:1; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.tile-group-title { margin:12px 4px 0; font-size:12px; color:color-mix(in srgb,var(--accent2) 82%,var(--text)); }
.tile {
position:relative;
min-height:126px;
padding:18px 16px 16px;
border-radius:var(--radius-card);
overflow:hidden;
background:var(--card);
box-shadow:0 10px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);
}
.tile::before {
display:grid;
place-items:center;
width:42px;
height:42px;
border-radius:var(--radius-control);
margin-bottom:2px;
color:var(--accent2);
background:color-mix(in srgb,var(--accent2) 13%,transparent);
border:1px solid color-mix(in srgb,var(--accent2) 24%,transparent);
font-size:21px;
font-family:var(--font-display);
font-weight:900;
letter-spacing:-.04em;
box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
#profileBtn::before { content:'我'; }
#petBtn::before { content:'宠'; }
#roomBtn::before { content:'聊'; }
#aiBtn::before { content:'AI'; }
#drawGameBtn::before { content:'画'; }
#gomokuBtn::before { content:'棋'; }
#snakeGameBtn::before { content:'蛇'; }
#cookieGameBtn::before { content:'饼'; }
#tankGameBtn::before { content:'坦'; }
#statusBtn::before { content:'态'; }
#messagesBtn::before { content:'信'; }
#fortuneBtn::before { content:'运'; }
#checkinBtn::before { content:'签'; }
#petPlazaBtn::before { content:'林'; }
#feedbackBtn::before { content:'议'; }
#mcuImageBtn::before { content:'屏'; }
#adminBtn::before { content:'管'; }
.tile strong { font-size:17px; letter-spacing:-.015em; }
.tile span { font-size:13px; }
.tile:hover { transform:translateY(-3px); box-shadow:0 18px 42px rgba(0,0,0,.28), 0 0 0 1px color-mix(in srgb,var(--accent2) 38%,transparent); }
.pet-home-status { position:relative; z-index:1; border-radius:var(--radius-card); padding:12px 14px; background:var(--card); }
.chat-card,.messages-card { height:min(760px, calc(100dvh - 130px)); min-height:560px; }
.chat-top {
min-height:66px;
padding:14px 16px;
border-bottom-color:var(--line-soft);
background:var(--card);
}
.chat-top strong { color:var(--text); font-size:16px; }
.chat-meta { align-items:flex-start; }
.messages { padding:20px 16px; }
.bubble { border-radius:var(--radius-card); box-shadow:0 8px 20px rgba(0,0,0,.12); }
.bubble.assistant { background:color-mix(in srgb,var(--panel) 82%,transparent); }
.bubble.user { background:var(--card); }
.composer { padding:14px; background:color-mix(in srgb,var(--panel) 36%,transparent); }
.profile-overview,.gomoku-stage-head,.gomoku-create,.status-item,.site-settings,.pet-plaza-detail,.profile-card-preview,.custom-pet-card,.pet-action-row,.pet-owned-row,.row-item,.plaza-post,.announce-block,.changelog-panel {
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--bg) 76%,transparent);
border-color:var(--line-soft);
}
.admin-body,.profile-body,.status-body,.feedback-body,.checkin-body,.pet-plaza-body,.draw-body,.gomoku-body,.snake-body,.tank-body,.fortune-body,.pet-body-wrap { padding:20px; }
.admin-body h3,.profile-section-head strong,.pet-section-label strong,.pet-space-head strong,.snake-leaderboard-head strong { letter-spacing:.02em; }
.row-item { padding:12px 14px; }
.pet-stage,.draw-stage,.gomoku-board-wrap,.snake-screen,.tank-screen,.pet-plaza-field { border-radius:var(--radius-card); }
.pet-stage { background:var(--bg); }
.pet-tabs { padding:5px; border-radius:var(--radius-card); background:color-mix(in srgb,var(--bg) 72%,transparent); border:1px solid var(--line-soft); }
.pet-tab { border-radius:var(--radius-control); }
.pet-shop-item,.pet-space-action,.checkin-day,.dm-contact { border-radius:var(--radius-card); }
.feedback-admin-text,.plaza-text,.announce-text { line-height:1.7; }
.preview-menu { position:relative; z-index:2; }
.preview-panel { border-radius:var(--radius-card); }
/* ===== iOS 26 Liquid Glass：按钮级轻量组件 ===== */
html[data-liquid-glass] {
--glass-opacity: .42;
--glass-blur: 16px;
--glass-highlight: .62;
--liquid-speed: 18s;
--glass-saturation: 1.36;
--glass-edge-opacity: .48;
--glass-depth-shadow: 0 10px 26px rgba(0,0,0,.18);
--glass-tint: var(--card-rgb);
--glass-x: 50%;
--glass-y: 20%;
--surface-glass: rgba(var(--card-rgb), .86);
--line-soft: color-mix(in srgb, #ffffff 12%, var(--line));
}
html[data-liquid-glass='strong'] {
--glass-opacity: .56;
--glass-blur: 22px;
--glass-highlight: .82;
--liquid-speed: 14s;
--glass-saturation: 1.52;
--glass-edge-opacity: .66;
--glass-depth-shadow: 0 14px 34px rgba(0,0,0,.22);
--surface-glass: rgba(var(--card-rgb), .9);
}
html[data-liquid-glass] body,
html[data-liquid-glass] body::before,
html[data-liquid-glass] .hero,
html[data-liquid-glass] .card {
animation:none;
transform:none;
}
html[data-liquid-glass] body { background:var(--bg); }
html[data-liquid-glass] body::before { background:none; }
html[data-liquid-glass] .liquid-glass-toggle,
html[data-liquid-glass] .theme-mode-btn,
html[data-liquid-glass] .theme-palette-toggle,
html[data-liquid-glass] button.ghost.small,
html[data-liquid-glass] button.small,
html[data-liquid-glass] .app-nav-item,
html[data-liquid-glass] .home-filter,
html[data-liquid-glass] .tab,
html[data-liquid-glass] .pet-tab,
html[data-liquid-glass] .plaza-filter,
html[data-liquid-glass] .theme-dot,
html[data-liquid-glass] input,
html[data-liquid-glass] textarea,
html[data-liquid-glass] select {
position:relative;
overflow:hidden;
isolation:isolate;
background:var(--panel);
border-color:rgba(255,255,255,calc(var(--glass-edge-opacity) * .28));
box-shadow:
var(--glass-depth-shadow),
inset 0 1px 0 rgba(255,255,255,calc(var(--glass-highlight) * .28)),
inset 0 -1px 0 rgba(255,255,255,calc(var(--glass-highlight) * .06));
backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation));
-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation));
will-change:box-shadow, background-position;
}
html[data-liquid-glass] .liquid-glass-toggle::before,
html[data-liquid-glass] .theme-mode-btn::before,
html[data-liquid-glass] .theme-palette-toggle::before,
html[data-liquid-glass] button.ghost.small::before,
html[data-liquid-glass] button.small::before,
html[data-liquid-glass] .app-nav-item::before,
html[data-liquid-glass] .home-filter::before,
html[data-liquid-glass] .tab::before,
html[data-liquid-glass] .pet-tab::before,
html[data-liquid-glass] .plaza-filter::before {
content:'';
position:absolute;
inset:-80%;
z-index:-1;
pointer-events:none;
background:rgba(255,255,255,calc(var(--glass-highlight) * .08));
filter:blur(12px);
opacity:.58;
transform:translate3d(0,0,0);
animation:liquid-button-sheen var(--liquid-speed) linear infinite paused;
}
html[data-liquid-glass] .liquid-glass-toggle::after,
html[data-liquid-glass] .theme-mode-btn::after,
html[data-liquid-glass] .theme-palette-toggle::after,
html[data-liquid-glass] button.ghost.small::after,
html[data-liquid-glass] button.small::after,
html[data-liquid-glass] .app-nav-item::after,
html[data-liquid-glass] .home-filter::after,
html[data-liquid-glass] .tab::after,
html[data-liquid-glass] .pet-tab::after,
html[data-liquid-glass] .plaza-filter::after {
content:'';
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
border-radius:inherit;
background:transparent;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,calc(var(--glass-edge-opacity) * .45)),
inset 0 1px 0 rgba(255,255,255,calc(var(--glass-highlight) * .18));
opacity:1;
}
html[data-liquid-glass] .liquid-glass-toggle:hover:not(:disabled),
html[data-liquid-glass] .theme-mode-btn:hover:not(:disabled),
html[data-liquid-glass] .theme-palette-toggle:hover:not(:disabled),
html[data-liquid-glass] button.ghost.small:hover:not(:disabled),
html[data-liquid-glass] button.small:hover:not(:disabled),
html[data-liquid-glass] .app-nav-item:hover,
html[data-liquid-glass] .home-filter:hover,
html[data-liquid-glass] .tab:hover,
html[data-liquid-glass] .pet-tab:hover,
html[data-liquid-glass] .plaza-filter:hover {
box-shadow:
0 14px 30px color-mix(in srgb,var(--accent2) 14%,rgba(0,0,0,.18)),
inset 0 1px 0 rgba(255,255,255,calc(var(--glass-highlight) * .36));
}
html[data-liquid-glass] .card::before,
html[data-liquid-glass] .card::after,
html[data-liquid-glass] .hero::before,
html[data-liquid-glass] .hero::after,
html[data-liquid-glass] .app-nav::before,
html[data-liquid-glass] .app-nav::after {
content:none;
}
html[data-liquid-glass] .liquid-glass-toggle:hover::before,
html[data-liquid-glass] .theme-mode-btn:hover::before,
html[data-liquid-glass] .theme-palette-toggle:hover::before,
html[data-liquid-glass] button.ghost.small:hover::before,
html[data-liquid-glass] button.small:hover::before,
html[data-liquid-glass] .app-nav-item:hover::before,
html[data-liquid-glass] .home-filter:hover::before,
html[data-liquid-glass] .tab:hover::before,
html[data-liquid-glass] .pet-tab:hover::before,
html[data-liquid-glass] .plaza-filter:hover::before {
animation-play-state:running;
}
@keyframes liquid-button-sheen {
0% { transform:rotate(0deg) scale(1.03) translate3d(0,0,0); }
50% { transform:rotate(180deg) scale(1.08) translate3d(1%, -1%, 0); }
100% { transform:rotate(360deg) scale(1.03) translate3d(0,0,0); }
}
@media (hover:none), (pointer:coarse) {
html[data-liquid-glass] .liquid-glass-toggle::before,
html[data-liquid-glass] .theme-mode-btn::before,
html[data-liquid-glass] .theme-palette-toggle::before,
html[data-liquid-glass] button.ghost.small::before,
html[data-liquid-glass] button.small::before,
html[data-liquid-glass] .app-nav-item::before,
html[data-liquid-glass] .home-filter::before,
html[data-liquid-glass] .tab::before,
html[data-liquid-glass] .pet-tab::before,
html[data-liquid-glass] .plaza-filter::before {
animation:none;
opacity:.34;
}
html[data-liquid-glass] .app-nav-item {
backdrop-filter:blur(10px) saturate(1.12);
-webkit-backdrop-filter:blur(10px) saturate(1.12);
}
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
html[data-liquid-glass] input,
html[data-liquid-glass] textarea,
html[data-liquid-glass] select {
background:color-mix(in srgb,var(--card) 88%,var(--bg));
}
}
@media (max-width:880px) {
.app { width:min(760px,100%); }
.tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px) {
.app { padding:14px 10px max(18px,env(safe-area-inset-bottom)); }
.hero { padding:18px; border-radius:var(--radius-card); }
.hero-side { align-items:stretch; }
.theme-switch { align-items:flex-start; }
.theme-swatches { width:100%; max-width:none; justify-content:flex-start; }
.card { border-radius:var(--radius-card); }
.login-card,.home-card { padding:16px; }
.home-top { flex-direction:column; align-items:stretch; padding:16px; }
.home-top-right { align-items:flex-start; }
.site-stats { border-radius:16px; justify-content:flex-start; }
.tiles { grid-template-columns:1fr; gap:10px; }
.tile { min-height:104px; padding:14px; }
.tile::before { position:absolute; right:14px; top:14px; width:36px; height:36px; font-size:18px; }
.tile strong { padding-right:48px; }
.chat-card,.messages-card { height:calc(100dvh - 112px); min-height:500px; }
.chat-persona-row { flex-direction:column; align-items:stretch; }
.chat-persona-row select { width:100%; }
.admin-body,.profile-body,.status-body,.feedback-body,.checkin-body,.pet-plaza-body,.draw-body,.gomoku-body,.snake-body,.tank-body,.fortune-body,.pet-body-wrap { padding:14px; }
}
/* ===== 底部快捷导航 ===== */
.app-nav-visible .app { padding-bottom:max(110px, calc(30px + env(safe-area-inset-bottom))); }
.app-nav {
position:fixed;
left:0;
right:0;
bottom:max(14px, env(safe-area-inset-bottom));
z-index:80;
width:min(560px, calc(100% - 24px));
max-width:calc(100vw - 24px);
margin:0 auto;
display:grid;
grid-template-columns:repeat(5,1fr);
gap:6px;
padding:8px;
border:1px solid var(--line-soft);
border-radius:var(--radius-card);
background:var(--card);
box-shadow:0 20px 60px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08);
backdrop-filter:blur(20px);
transform:translateZ(0);
box-sizing:border-box;
}
.app-nav-item {
position:relative;
min-height:52px;
padding:6px 8px;
border-radius:18px;
background:transparent;
color:var(--muted);
box-shadow:none;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:2px;
}
.app-nav-item span { font-size:18px; line-height:1; filter:saturate(.85); }
.app-nav-item strong { font-size:11px; line-height:1; font-weight:900; }
.app-nav-item:hover:not(:disabled) { color:var(--text); transform:translateY(-1px); filter:none; }
.app-nav-item.active {
color:var(--on-accent);
background:var(--accent);
box-shadow:0 10px 22px color-mix(in srgb,var(--accent) 26%,transparent);
}
.app-nav-item.active span { filter:saturate(1.12); }
.app-nav-item.has-unread::after {
content:attr(data-unread);
position:absolute;
top:4px;
right:10px;
min-width:18px;
height:18px;
padding:0 5px;
border-radius:var(--radius-chip);
display:grid;
place-items:center;
background:var(--danger);
color:#fffaf2;
font-size:10px;
font-weight:900;
box-shadow:0 0 0 2px color-mix(in srgb,var(--panel) 92%,transparent);
}
@media (min-width:920px) {
.app-nav { bottom:20px; }
}
@media (max-width:560px) {
.app-nav-visible .app { padding-bottom:max(100px, calc(20px + env(safe-area-inset-bottom))); }
.app-nav {
left:max(8px, env(safe-area-inset-left));
right:max(8px, env(safe-area-inset-right));
width:auto;
max-width:none;
bottom:max(8px, env(safe-area-inset-bottom));
border-radius:var(--radius-card);
}
.app-nav-item { min-height:50px; padding:5px 4px; border-radius:16px; }
.app-nav-item span { font-size:17px; }
.app-nav-item strong { font-size:10px; }
}
/* ===== 管理后台仪表盘化 ===== */
.admin-card { min-height:min(820px, calc(100dvh - 120px)); }
.admin-body { overflow:auto; }
.admin-dashboard {
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:14px;
align-items:start;
}
.admin-panel {
min-width:0;
padding:15px;
border:1px solid var(--admin-line-soft);
border-radius:var(--radius-card);
background:var(--admin-panel);
box-shadow:0 12px 28px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.04);
}
.admin-panel-wide { grid-column:1 / -1; }
.admin-panel h3 { margin:0 0 12px; display:flex; align-items:center; gap:8px; color:var(--admin-accent); font-size:14px; }
.admin-panel h3::before { content:''; width:9px; height:9px; border-radius:var(--radius-chip); background:var(--admin-accent); box-shadow:0 0 12px color-mix(in srgb,var(--admin-accent) 70%,transparent); }
.admin-panel .admin-list { max-height:360px; overflow:auto; padding-right:2px; }
.admin-panel-wide .admin-list { max-height:420px; }
.admin-panel .site-settings { background:transparent; border:0; padding:0; }
.admin-panel .full { margin-top:4px; }
.admin-panel .admin-row { align-items:stretch; }
.admin-panel .admin-row input,.admin-panel .admin-row select { min-width:0; }
.admin-health { display:flex; flex-direction:column; gap:10px; }
.health-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.health-card { min-height:82px; padding:12px; border:1px solid var(--line-soft); border-radius:var(--radius-card); background:color-mix(in srgb,var(--bg) 72%,transparent); display:flex; flex-direction:column; gap:4px; }
.health-card span { color:var(--muted); font-size:12px; }
.health-card strong { color:var(--accent2); font-size:23px; font-variant-numeric:tabular-nums; }
.health-card em { color:var(--muted); font-size:11px; font-style:normal; line-height:1.35; }
.health-card.warn strong { color:var(--gold); }
.health-card.danger strong { color:color-mix(in srgb,var(--danger) 86%,var(--text)); }
.health-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.health-detail { display:grid; gap:8px; padding:12px; border:1px solid var(--line-soft); border-radius:var(--radius-card); background:color-mix(in srgb,var(--bg) 68%,transparent); }
.health-detail strong { color:var(--accent2); }
.health-check-list { display:flex; flex-wrap:wrap; gap:6px; }
.health-check { padding:5px 8px; border-radius:var(--radius-chip); border:1px solid var(--line); color:var(--muted); font-size:12px; line-height:1.2; }
.health-check.ok { color:var(--ok); border-color:color-mix(in srgb,var(--ok) 40%,var(--line)); background:color-mix(in srgb,var(--ok) 7%,transparent); }
.health-check.danger { color:color-mix(in srgb,var(--danger) 82%,var(--text)); border-color:color-mix(in srgb,var(--danger) 48%,var(--line)); background:color-mix(in srgb,var(--danger) 9%,transparent); }
.latest-error { display:grid; gap:6px; padding:12px; border:1px solid color-mix(in srgb,var(--danger) 38%,var(--line)); border-radius:var(--radius-card); background:color-mix(in srgb,var(--danger) 8%,var(--bg)); }
.latest-error code { white-space:pre-wrap; word-break:break-word; color:var(--text); background:color-mix(in srgb,var(--bg) 76%,transparent); border:1px solid var(--line); border-radius:var(--radius-control); padding:8px; font-size:12px; }
#adminMsg { position:sticky; top:0; z-index:3; margin:0 0 12px; padding:8px 10px; border-radius:var(--radius-card); background:color-mix(in srgb,var(--admin-card) 82%,transparent); backdrop-filter:blur(12px); }
#adminMsg:empty { display:none; }
@media (max-width:760px) {
.admin-dashboard { grid-template-columns:1fr; }
.admin-panel-wide { grid-column:auto; }
.admin-panel .admin-list,.admin-panel-wide .admin-list { max-height:none; }
}
/* ===== 个人主页卡片化 ===== */
.profile-card { min-height:min(760px, calc(100dvh - 120px)); }
.profile-body {
display:grid;
grid-template-columns:minmax(260px,.9fr) minmax(0,1.1fr);
gap:14px;
align-items:start;
overflow:auto;
}
.profile-overview,
.profile-card-preview,
.profile-section {
border:1px solid var(--line-soft);
border-radius:var(--radius-card);
background:var(--panel);
box-shadow:0 12px 28px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.04);
}
.earned-title-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.earned-title-chip { min-height:30px; padding:0 10px; }
.profile-overview { grid-row:span 2; padding:18px; align-items:flex-start; flex-direction:column; }
.profile-avatar { width:76px; height:76px; flex-basis:76px; font-size:30px; box-shadow:0 14px 30px color-mix(in srgb,var(--accent) 24%,transparent); }
.profile-identity > strong { font-size:26px; }
.profile-card-preview { margin:0; padding:16px; }
.profile-card-preview p { font-size:13px; }
#profileMsg { grid-column:1 / -1; margin:0; }
#profileMsg:empty { display:none; }
.profile-section { padding:16px; border-top:1px solid var(--line-soft); }
.profile-section:nth-of-type(4),.profile-section:nth-of-type(5) { grid-column:span 1; }
.profile-section-head { margin-bottom:12px; }
.profile-section-head strong { display:flex; align-items:center; gap:8px; }
.profile-section-head strong::before { content:''; width:8px; height:8px; border-radius:var(--radius-chip); background:var(--accent2); box-shadow:0 0 10px color-mix(in srgb,var(--accent2) 70%,transparent); }
.profile-form,.profile-form-stack { gap:10px; }
@media (max-width:760px) {
.profile-body { grid-template-columns:1fr; }
.profile-overview { grid-row:auto; flex-direction:row; align-items:center; }
#profileMsg { grid-column:auto; }
}
/* ===== 宠物小屋控制台化 ===== */
.pet-card { min-height:min(820px, calc(100dvh - 120px)); }
.pet-body-wrap {
display:grid;
grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr);
gap:14px;
align-items:start;
overflow:auto;
}
.pet-hero {
grid-row:span 4;
width:100%;
align-self:start;
padding:14px;
border:1px solid var(--line-soft);
border-radius:var(--radius-card);
background:var(--card);
box-shadow:0 14px 32px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.04);
}
.pet-stage { height:300px; }
.pet-title-row { padding:12px 4px 0; }
.pet-stats {
border:1px solid var(--line-soft);
border-radius:var(--radius-card);
overflow:hidden;
background:color-mix(in srgb,var(--bg) 76%,transparent);
}
.pet-stat { min-height:72px; }
.pet-activity-progress { border-radius:var(--radius-chip); background:color-mix(in srgb,var(--bg) 78%,transparent); }
#petMsg { margin:0; padding:8px 10px; border-radius:14px; background:color-mix(in srgb,var(--panel) 38%,transparent); }
#petMsg:empty { display:none; }
.pet-tabs { position:sticky; top:0; z-index:4; grid-template-columns:repeat(6,minmax(0,1fr)); backdrop-filter:blur(14px); }
.pet-pane {
padding:15px;
border:1px solid var(--line-soft);
border-radius:var(--radius-card);
background:var(--card);
box-shadow:0 12px 28px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.04);
}
.pet-vitals { grid-template-columns:repeat(3,minmax(0,1fr)); }
.pet-space-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
.pet-shop-list,.pet-task-list,.pet-leaderboard { max-height:430px; overflow:auto; padding-right:2px; }
@media (max-width:820px) {
.pet-body-wrap { grid-template-columns:1fr; }
.pet-hero { grid-row:auto; }
.pet-stage { height:260px; }
.pet-shop-list,.pet-task-list,.pet-leaderboard { max-height:none; }
}
@media (max-width:560px) {
.pet-tabs { overflow:auto; display:flex; }
.pet-tab { flex:0 0 auto; min-width:76px; }
.pet-vitals,.pet-space-actions { grid-template-columns:1fr; }
}
/* ===== 全局交互细节打磨 ===== */
:focus-visible {
outline:3px solid color-mix(in srgb,var(--accent2) 72%,transparent);
outline-offset:3px;
}
* { scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--accent2) 42%,var(--line)) transparent; }
*::-webkit-scrollbar { width:9px; height:9px; }
*::-webkit-scrollbar-track { background:transparent; }
*::-webkit-scrollbar-thumb { background:color-mix(in srgb,var(--accent2) 36%,var(--line)); border-radius:var(--radius-chip); border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover { background:color-mix(in srgb,var(--accent2) 58%,var(--line)); border:2px solid transparent; background-clip:padding-box; }
.empty,.dm-empty {
padding:14px 16px;
border:1px dashed var(--line-soft);
border-radius:18px;
background:color-mix(in srgb,var(--bg) 54%,transparent);
text-align:center;
}
.msg:not(:empty) { animation:soft-pop .18s ease; }
@keyframes soft-pop { from { opacity:.65; transform:translateY(2px); } to { opacity:1; transform:none; } }
.card,.tile,.row-item,.admin-panel,.profile-section,.pet-pane { transform-origin:center top; }
.tile,.row-item,.admin-panel,.profile-section,.pet-pane,.app-nav-item { will-change:transform; }
@media (prefers-reduced-motion: reduce) {
*,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important; }
}
@media (hover:none) {
button:hover:not(:disabled),.tile:hover { transform:none; }
}
@media (pointer:coarse) {
.small,
.theme-mode-btn,
.theme-palette-toggle,
.home-filter,
.plaza-filter,
.tab,
.pet-tab,
.row-item-actions button,
.plaza-actions button {
min-height:44px;
}
.theme-dot {
width:44px;
height:44px;
min-width:44px;
min-height:44px;
}
}
/* ===== 首页功能搜索 ===== */
.home-tools { position:relative; z-index:2; display:grid; grid-template-columns:minmax(260px,1fr) auto; gap:10px; align-items:center; margin:0 0 14px; }
.home-search { min-height:50px; display:flex; align-items:center; gap:10px; padding:7px 12px; border:1px solid var(--line-soft); border-radius:var(--radius-card); background:color-mix(in srgb,var(--bg) 54%,transparent); backdrop-filter:blur(12px); }
.home-search span { color:var(--accent2); font-weight:900; font-size:18px; }
.home-search input { min-height:44px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.home-search input:focus { box-shadow:none; }
.home-tools .home-filters { margin:0; }
.home-no-results { grid-column:1 / -1; margin:4px 0 0; }
@media (max-width:760px) {
.home-tools { grid-template-columns:1fr; }
.home-tools .home-filters { overflow:auto; flex-wrap:nowrap; }
.home-tools .home-filter { white-space:nowrap; }
}
/* ===== 内容展示与消息布局打磨 ===== */
#plazaCard.chat-card { min-height:min(760px, calc(100dvh - 126px)); }
.plaza-filters {
position:sticky;
top:0;
z-index:5;
justify-content:flex-start;
margin:0;
padding:10px 14px;
border-bottom:1px solid var(--line-soft);
background:color-mix(in srgb,var(--card) 84%,transparent);
backdrop-filter:blur(16px);
}
.plaza-filter { border-radius:var(--radius-chip); }
#plazaMsg { margin:0; padding:8px 14px; }
.plaza-list { padding:16px 14px; }
.plaza-post { box-shadow:0 10px 24px rgba(0,0,0,.12); }
.plaza-meta { margin-bottom:8px; }
.plaza-actions button { border-radius:var(--radius-chip); }
.composer textarea { min-height:46px; }
.composer {
position:relative;
background:var(--panel);
backdrop-filter:blur(14px);
}
.plaza-composer-top {
border-top:0;
border-bottom:1px solid var(--line);
align-items:center;
}
.plaza-composer-top textarea {
max-height:88px;
}
.messages-card .chat-top,#plazaCard .chat-top,#chatCard .chat-top { flex:0 0 auto; }
.dm-layout { background:color-mix(in srgb,var(--bg) 34%,transparent); }
.dm-contacts { background:color-mix(in srgb,var(--panel) 26%,transparent); }
.dm-contact { box-shadow:0 8px 18px rgba(0,0,0,.10); }
.dm-contact.active { background:var(--accent); }
.dm-thread { min-height:0; }
.mail-request-box { background:color-mix(in srgb,var(--panel) 30%,transparent); }
#dmMsg { margin:0; padding:8px 14px; }
/* ===== 站内信：移动端自适应重构 ===== */
@media (max-width:560px) {
.messages-card { height:calc(100dvh - 86px); min-height:0; border-radius:var(--radius-card); }
.messages-card .chat-top { padding:10px 12px; gap:8px; }
.messages-card .chat-meta span { display:none; }
.dm-layout { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); min-height:0; }
.dm-contacts { border-right:0; border-bottom:1px solid var(--line); flex-direction:row; gap:8px; padding:9px 10px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; }
.dm-contacts::-webkit-scrollbar { display:none; }
.dm-contact { min-width:122px; max-width:150px; min-height:46px; padding:8px 10px; border-radius:var(--radius-chip); justify-content:center; }
.dm-contact strong { font-size:13px; line-height:1.1; }
.dm-contact span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.dm-thread { min-height:0; background:var(--card); }
.dm-list { padding:14px 10px 12px; gap:10px; }
.dm-message { max-width:88%; }
.dm-bubble { padding:10px 12px; border-radius:var(--radius-card); font-size:14px; line-height:1.58; box-shadow:0 6px 16px rgba(0,0,0,.14); }
.dm-message-meta { font-size:10px; padding:0 5px; }
#dmForm.composer { padding:9px 10px max(9px, env(safe-area-inset-bottom)); gap:8px; border-top:1px solid var(--line); }
#dmForm textarea { min-height:44px; max-height:92px; padding:11px 12px; border-radius:var(--radius-control); }
#dmSendBtn { min-height:44px; padding:0 14px; border-radius:var(--radius-control); }
.mail-request-box { max-height:28vh; overflow:auto; padding:10px; }
#dmMsg { padding:6px 12px; min-height:0; }
}
@media (max-width:560px) {
.plaza-filters { overflow:auto; flex-wrap:nowrap; }
.plaza-filter { white-space:nowrap; }
.composer { gap:8px; }
.composer textarea { min-height:44px; }
}
/* ===== 功能页视觉统一 ===== */
.fortune-card,.checkin-card,.pet-plaza-card,.draw-card,.snake-card,.tank-card,.gomoku-card,.status-card,.feedback-card,.mcu-image-card {
min-height:min(780px, calc(100dvh - 126px));
}
.fortune-card .chat-top,.checkin-card .chat-top,.pet-plaza-card .chat-top,.draw-card .chat-top,.snake-card .chat-top,.tank-card .chat-top,.gomoku-card .chat-top,.status-card .chat-top,.feedback-card .chat-top,.mcu-image-card .chat-top {
background:color-mix(in srgb,var(--panel) 68%,transparent);
}
.fortune-body,.checkin-body,.pet-plaza-body,.draw-body,.snake-body,.tank-body,.gomoku-body,.status-body,.feedback-body,.mcu-image-body {
background:color-mix(in srgb,var(--bg) 18%,transparent);
}
.fortune-body > .msg,.checkin-body > .msg,.pet-plaza-body > .msg,.draw-body > .msg,.snake-body > .msg,.tank-body > .msg,.gomoku-body > .msg,.status-body > .msg,.feedback-body > .msg,.mcu-image-body > .msg {
margin:0;
padding:8px 10px;
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--panel) 34%,transparent);
}
.fortune-body > .msg:empty,.checkin-body > .msg:empty,.pet-plaza-body > .msg:empty,.draw-body > .msg:empty,.snake-body > .msg:empty,.tank-body > .msg:empty,.gomoku-body > .msg:empty,.status-body > .msg:empty,.feedback-body > .msg:empty,.mcu-image-body > .msg:empty { display:none; }
.checkin-calendar,.status-grid,.draw-stage,.gomoku-stage-head,.gomoku-create,.snake-leaderboard,.pet-plaza-detail,.feedback-form,.mcu-image-panel,.mcu-image-preview-panel,.mcu-image-endpoints {
border:1px solid var(--line-soft);
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--panel) 58%,transparent);
box-shadow:0 12px 28px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.04);
}
.draw-bar,.gomoku-create-row,.snake-controls,.tank-controls,.gomoku-actions {
padding:10px;
border:1px solid var(--line-soft);
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--bg) 56%,transparent);
}
.snake-stats,.tank-stats,.gomoku-meta {
padding:8px 10px;
border:1px solid var(--line-soft);
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--bg) 56%,transparent);
}
.snake-screen,.tank-screen,.gomoku-board-wrap,.draw-canvas-wrap canvas {
box-shadow:0 18px 44px rgba(0,0,0,.30), 0 0 0 1px color-mix(in srgb,var(--accent2) 18%,transparent), inset 0 1px 0 rgba(255,255,255,.05);
}
#drawModeCard .tiles,.draw-body .tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:640px) {
#drawModeCard .tiles,.draw-body .tiles { grid-template-columns:1fr; }
.snake-stats,.tank-stats,.gomoku-meta { border-radius:var(--radius-card); }
}
#drawModeCard .tile::before { content:'🎮'; }
#drawModePublicBtn::before { content:'🖌️'; }
#drawModeChainBtn::before { content:'🔗'; }
#drawModeRoomBtn::before { content:'🚪'; }
#drawModeLeaderboardBtn::before { content:'🏆'; }
/* ===== 签到日历细节 ===== */
.checkin-calendar { padding:12px; }
.checkin-weekday {
min-height:24px;
display:grid;
place-items:center;
color:var(--muted);
font-size:11px;
font-weight:900;
letter-spacing:.08em;
}
.checkin-day { position:relative; overflow:hidden; }
.checkin-day.done::after { content:'✓'; position:absolute; right:4px; top:2px; font-size:10px; opacity:.8; }
.checkin-day.today { border-color:var(--accent2); color:var(--accent2); font-weight:900; }
.checkin-day.today.done { color:var(--on-accent); }
#checkinDoBtn { border-radius:var(--radius-chip); min-height:48px; }
.checkin-actions { display:grid; grid-template-columns:minmax(0,1fr) minmax(132px,.42fr); gap:10px; align-items:stretch; }
#checkinMakeupBtn { border-radius:var(--radius-chip); min-height:48px; }
@media (max-width:480px) { .checkin-actions { grid-template-columns:1fr; } }
/* ===== 窄屏功能页收口 ===== */
@media (max-width:560px) {
.fortune-deck { height:320px; }
.fortune-face { padding:20px; }
.pet-plaza-field { border-radius:var(--radius-card); }
.pet-plaza-summary { left:10px; top:10px; max-width:calc(100% - 20px); }
.pet-plaza-detail { border-radius:var(--radius-card); }
.snake-dpad-grid { grid-template-columns:repeat(3,52px); grid-template-rows:repeat(3,52px); }
.snake-dir,.snake-dpad-cell,.snake-dpad-center { width:52px; height:52px; }
.tank-controls,.snake-controls,.gomoku-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.tank-controls button,.snake-controls button,.gomoku-actions button { width:100%; }
.tank-ability-row { width:100%; grid-template-columns:1fr; }
.draw-bar { align-items:stretch; }
.draw-bar button { flex:1 1 auto; }
}
/* ===== miniadmin 专属宠物：黑曜军官 ===== */
.pet-stage[data-species='shadow-officer'] .pixel-pet::after {
content:'';
position:absolute;
left:23px;
top:108px;
width:190px;
height:104px;
background:#161616;
border:5px solid #573d32;
border-bottom-color:#d4af37;
border-radius:16px 16px 10px 10px;
box-shadow:inset 12px 0 #0b0b0b, 0 0 0 3px rgba(212,175,55,.28);
z-index:0;
}
.pet-stage[data-species='shadow-officer'] .pixel-pet::before {
content:'◆';
position:absolute;
left:69px;
top:8px;
width:104px;
height:44px;
display:grid;
place-items:center;
color:#ffd700;
font-size:18px;
background:#151515;
border:5px solid #573d32;
border-bottom-color:#d4af37;
border-radius:44% 44% 10px 10px;
box-shadow:0 0 0 3px rgba(212,175,55,.25), inset 8px 0 #050505;
z-index:8;
}
.pet-stage[data-species='shadow-officer'] .pet-head {
top:50px;
background:#ffe4d6;
box-shadow:inset 12px 0 #e6c2ae;
border-color:#573d32;
z-index:5;
}
.pet-stage[data-species='shadow-officer'] .pet-head::before {
content:'';
position:absolute;
left:-9px;
top:-22px;
width:150px;
height:56px;
background:#171717;
border:5px solid #573d32;
border-bottom:0;
border-radius:44% 44% 12px 12px;
box-shadow:inset 13px 0 #050505;
z-index:6;
}
.pet-stage[data-species='shadow-officer'] .pet-head::after {
content:'';
position:absolute;
left:18px;
top:32px;
width:47px;
height:62px;
background:#0d0d0d;
clip-path:polygon(25% 0,75% 12%,54% 38%,84% 54%,55% 100%,20% 72%,37% 45%,4% 25%);
box-shadow:0 0 0 6px rgba(74,28,28,.16);
z-index:7;
}
.pet-stage[data-species='shadow-officer'] .pet-body {
top:112px;
width:96px;
height:86px;
background:#1a1a1a;
border-color:#573d32;
box-shadow:inset 10px 0 #050505;
z-index:3;
}
.pet-stage[data-species='shadow-officer'] .pet-body::after { background:#1a1a1a; box-shadow:45px 0 0 #1a1a1a,45px 0 0 4px #573d32; }
.pet-stage[data-species='shadow-officer'] .pet-tail {
left:22px;
top:138px;
width:74px;
height:24px;
background:#111;
border-color:#573d32;
transform:rotate(-34deg);
z-index:1;
}
.pet-stage[data-species='shadow-officer'] .pet-ear {
top:-9px;
width:32px;
height:72px;
background:#111;
border-color:#573d32;
border-radius:12px;
z-index:4;
}
.pet-stage[data-species='shadow-officer'] .pet-ear::after { inset:9px 8px 12px; background:#333; border-radius:16px; }
.pet-stage[data-species='shadow-officer'] .pet-ear-left { left:-24px; transform:rotate(16deg); }
.pet-stage[data-species='shadow-officer'] .pet-ear-right { right:-24px; transform:rotate(-16deg); }
.pet-stage[data-species='shadow-officer'] .pet-eye {
top:45px;
height:10px;
background:transparent;
border-top:4px solid #1a1a1a;
border-radius:50%;
box-shadow:none;
z-index:8;
}
.pet-stage[data-species='shadow-officer'] .pet-nose {
left:59px;
top:73px;
width:26px;
height:12px;
background:transparent;
border-bottom:4px solid #8b4513;
border-radius:0 0 50% 50%;
z-index:8;
}
.pet-stage[data-species='shadow-officer'] .pet-nose::after { display:none; }
.pet-stage[data-species='shadow-officer'] .pet-outfit { display:none !important; }
.pet-stage[data-species='shadow-officer'] .pet-stage::before { background:#111; }
@media (max-width:560px) {
.today-hub { padding:12px; }
.today-summary { grid-template-columns:1fr; align-items:stretch; }
.today-progress strong { white-space:normal; }
.today-next-btn { width:100%; }
.today-hub-list,.health-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.today-card,.health-card { min-height:78px; padding:10px; }
.health-actions { justify-content:stretch; }
.health-actions button { flex:1 1 130px; }
}
/* ===== 站内吉祥物：叽叽 ===== */
.jiji-mascot { position:fixed; right:max(14px, env(safe-area-inset-right)); bottom:max(96px, calc(86px + env(safe-area-inset-bottom))); z-index:92; display:flex; flex-direction:column; align-items:flex-end; gap:8px; pointer-events:none; touch-action:none; }
.jiji-mascot.dragging { cursor:grabbing; }
.jiji-btn { width:78px; height:82px; padding:0; border-radius:var(--radius-card); overflow:visible; border:0; background:transparent; box-shadow:none; pointer-events:auto; transform-origin:center bottom; animation:jiji-idle 3.4s ease-in-out infinite; cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none; }
.jiji-btn img { width:100%; height:100%; object-fit:contain; object-position:center; display:block; pointer-events:none; -webkit-user-drag:none; user-select:none; filter:drop-shadow(0 14px 18px rgba(0,0,0,.30)) drop-shadow(0 0 8px color-mix(in srgb,var(--gold) 22%,transparent)); }
.jiji-btn:hover:not(:disabled) { transform:translateY(-2px) rotate(-3deg); filter:saturate(1.08); }
.jiji-hide-btn { position:absolute; right:-4px; top:-6px; width:44px; height:44px; min-width:44px; min-height:44px; padding:0; border-radius:50%; border:1px solid color-mix(in srgb,var(--line) 78%,transparent); background:color-mix(in srgb,var(--panel) 92%,transparent); color:var(--muted); font-size:15px; line-height:1; pointer-events:auto; box-shadow:0 8px 18px rgba(0,0,0,.22); }
.jiji-hide-btn:hover:not(:disabled) { color:var(--text); border-color:var(--accent2); }
.jiji-bubble { order:-1; max-width:min(250px, calc(100vw - 118px)); padding:10px 12px; border:1px solid color-mix(in srgb,var(--gold) 42%,var(--line)); border-radius:var(--radius-card) var(--radius-card) 4px var(--radius-card); background:color-mix(in srgb,var(--panel) 94%,transparent); color:var(--text); box-shadow:0 14px 34px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.06); font-size:13px; line-height:1.45; opacity:0; transform:translateY(8px) scale(.96); transition:opacity .18s ease,transform .18s ease; pointer-events:none; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.jiji-bubble.show { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.jiji-bubble small { display:block; margin-top:4px; color:var(--gold); font-size:10px; font-weight:900; letter-spacing:.08em; }
.jiji-error-actions { display:flex; gap:6px; margin-top:8px; }
.jiji-error-actions button { min-height:44px; padding:0 12px; border-radius:var(--radius-chip); font-size:11px; background:color-mix(in srgb,var(--gold) 18%,transparent); color:var(--text); border:1px solid color-mix(in srgb,var(--gold) 42%,var(--line)); box-shadow:none; }
.jiji-chat-panel { order:-1; width:min(330px, calc(100vw - 24px)); max-height:min(520px, calc(100svh - 150px)); display:flex; flex-direction:column; overflow:hidden; border:1px solid color-mix(in srgb,var(--gold) 34%,var(--line)); border-radius:var(--radius-card); background:color-mix(in srgb,var(--panel) 94%,transparent); box-shadow:0 22px 58px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); pointer-events:auto; }
.jiji-chat-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line); }
.jiji-chat-head strong { color:var(--gold); font-size:14px; }
.jiji-chat-head button { width:44px; min-width:44px; min-height:44px; padding:0; border-radius:50%; }
.jiji-chat-messages { flex:1; min-height:120px; overflow:auto; display:flex; flex-direction:column; gap:8px; padding:12px; }
.jiji-chat-msg { max-width:86%; margin:0; padding:9px 11px; border-radius:var(--radius-card); font-size:13px; line-height:1.5; white-space:pre-wrap; }
.jiji-chat-msg.bot { align-self:flex-start; color:var(--text); background:color-mix(in srgb,var(--panel) 78%,transparent); border:1px solid var(--line); border-bottom-left-radius:5px; }
.jiji-chat-msg.user { align-self:flex-end; color:#fffaf2; background:var(--user-bubble); border-bottom-right-radius:5px; }
.jiji-chat-form { display:flex; gap:8px; align-items:flex-end; padding:10px; border-top:1px solid var(--line); background:color-mix(in srgb,var(--bg) 72%,transparent); }
.jiji-chat-form textarea { min-height:44px; max-height:110px; resize:none; padding:10px 11px; border-radius:var(--radius-control); line-height:1.45; }
.jiji-chat-form button { flex:0 0 auto; min-height:44px; padding:0 13px; border-radius:var(--radius-control); }
.jiji-pop .jiji-btn { animation:jiji-pop .42s ease, jiji-idle 3.4s ease-in-out .42s infinite; }
.jiji-mascot[data-mood='happy'] .jiji-btn img { filter:drop-shadow(0 14px 18px rgba(0,0,0,.30)) drop-shadow(0 0 10px color-mix(in srgb,var(--ok) 35%,transparent)); }
.jiji-mascot[data-mood='warn'] .jiji-btn img { filter:drop-shadow(0 14px 18px rgba(0,0,0,.30)) drop-shadow(0 0 10px color-mix(in srgb,var(--danger) 38%,transparent)); }
.jiji-mascot[data-mood='excited'] .jiji-btn { animation:jiji-excited .58s ease-in-out 2, jiji-idle 3.4s ease-in-out 1.2s infinite; }
@keyframes jiji-idle { 0%,100% { transform:translateY(0) rotate(0deg); } 50% { transform:translateY(-4px) rotate(1.5deg); } }
@keyframes jiji-pop { 0% { transform:scale(.92) rotate(-5deg); } 55% { transform:scale(1.08) rotate(5deg); } 100% { transform:scale(1) rotate(0deg); } }
@keyframes jiji-excited { 0%,100% { transform:translateY(0) rotate(0deg); } 30% { transform:translateY(-7px) rotate(-8deg); } 70% { transform:translateY(-3px) rotate(8deg); } }
@media (max-width:560px) {
.jiji-mascot { right:max(10px, env(safe-area-inset-right)); bottom:max(86px, calc(76px + env(safe-area-inset-bottom))); }
.jiji-btn { width:62px; height:66px; }
.jiji-bubble { max-width:220px; font-size:12px; }
.jiji-chat-panel { width:calc(100vw - 20px); max-height:min(460px, calc(100svh - 118px)); }
.jiji-chat-msg { font-size:12px; }
}
@media (max-width:760px) {
body.app-nav-suppressed .app-nav { display:none !important; }
body.app-nav-suppressed .app { padding-bottom:max(18px, env(safe-area-inset-bottom)); }
body.app-nav-suppressed .jiji-mascot { bottom:max(18px, calc(16px + env(safe-area-inset-bottom))); }
}
/* ===== 宠物精灵形象映射：不再复用 .pet-stage 背景舞台 ===== */
.pet-plaza-sprite-stage[data-outfit='red-scarf'] .pet-outfit-scarf,
.pet-plaza-sprite-stage[data-outfit='star-cap'] .pet-outfit-cap,
.pet-plaza-sprite-stage[data-outfit='blue-bow'] .pet-outfit-bow,
.pet-plaza-sprite-stage[data-outfit='explorer-pack'] .pet-outfit-pack,
.pet-plaza-sprite-stage[data-outfit='royal-crown'] .pet-outfit-crown { display:block; }
.pet-plaza-sprite-stage[data-species='dog'] .pet-head,.pet-plaza-sprite-stage[data-species='dog'] .pet-body,.pet-plaza-sprite-stage[data-species='dog'] .pet-tail { background:#a96f43; }
.pet-plaza-sprite-stage[data-species='dog'] .pet-head { box-shadow:inset 12px 0 #c88b5c; }
.pet-plaza-sprite-stage[data-species='dog'] .pet-body { box-shadow:inset 10px 0 #bd8153; }
.pet-plaza-sprite-stage[data-species='dog'] .pet-ear { top:-13px; width:30px; height:57px; background:#7c4b32; border-radius:0 0 8px 8px; z-index:4; }
.pet-plaza-sprite-stage[data-species='dog'] .pet-ear::after { display:none; }
.pet-plaza-sprite-stage[data-species='dog'] .pet-ear-left { left:-17px; transform:rotate(16deg); }
.pet-plaza-sprite-stage[data-species='dog'] .pet-ear-right { right:-17px; transform:rotate(-16deg); }
.pet-plaza-sprite-stage[data-species='dog'] .pet-tail { top:116px; width:68px; transform:rotate(31deg); }
.pet-plaza-sprite-stage[data-species='bunny'] .pet-head,.pet-plaza-sprite-stage[data-species='bunny'] .pet-body,.pet-plaza-sprite-stage[data-species='bunny'] .pet-tail { background:#d8d9df; }
.pet-plaza-sprite-stage[data-species='bunny'] .pet-head { top:66px; box-shadow:inset 12px 0 #f0f1f5; }
.pet-plaza-sprite-stage[data-species='bunny'] .pet-body { top:121px; box-shadow:inset 10px 0 #e9eaf0; }
.pet-plaza-sprite-stage[data-species='bunny'] .pet-ear { top:-70px; width:34px; height:92px; background:#e6e7ed; border-radius:8px 8px 0 0; z-index:-1; }
.pet-plaza-sprite-stage[data-species='bunny'] .pet-ear::after { inset:11px 8px 8px; background:#d9889e; }
.pet-plaza-sprite-stage[data-species='bunny'] .pet-ear-left { left:10px; transform:rotate(-7deg); }
.pet-plaza-sprite-stage[data-species='bunny'] .pet-ear-right { right:10px; transform:rotate(7deg); }
.pet-plaza-sprite-stage[data-species='bunny'] .pet-tail { left:151px; top:150px; width:36px; height:36px; border-radius:50%; transform:none; }
.pet-plaza-sprite-stage[data-species='fox'] .pet-head,.pet-plaza-sprite-stage[data-species='fox'] .pet-body,.pet-plaza-sprite-stage[data-species='fox'] .pet-tail { background:#d66f38; }
.pet-plaza-sprite-stage[data-species='fox'] .pet-head { box-shadow:inset 12px 0 #ef9651; }
.pet-plaza-sprite-stage[data-species='fox'] .pet-body { box-shadow:inset 10px 0 #e88949; }
.pet-plaza-sprite-stage[data-species='fox'] .pet-ear { width:56px; height:52px; background:#d66f38; }
.pet-plaza-sprite-stage[data-species='fox'] .pet-ear::after { inset:14px 13px 7px; background:#f0e4d6; }
.pet-plaza-sprite-stage[data-species='fox'] .pet-tail { top:116px; width:77px; height:31px; transform:rotate(-25deg); }
.pet-plaza-sprite-stage[data-species='fox'] .pet-tail::after { content:''; position:absolute; right:-3px; top:0; width:21px; height:21px; background:#f2e9df; border-left:4px solid #573d32; }
.pet-plaza-sprite-stage[data-species='penguin'] .pet-head,.pet-plaza-sprite-stage[data-species='penguin'] .pet-body,.pet-plaza-sprite-stage[data-species='penguin'] .pet-tail { background:#293641; }
.pet-plaza-sprite-stage[data-species='penguin'] .pet-head { top:56px; height:103px; box-shadow:inset 12px 0 #42515c; }
.pet-plaza-sprite-stage[data-species='penguin'] .pet-body { top:118px; height:77px; box-shadow:inset 10px 0 #394853; }
.pet-plaza-sprite-stage[data-species='penguin'] .pet-ear { display:none; }
.pet-plaza-sprite-stage[data-species='penguin'] .pet-head::after { content:''; position:absolute; left:26px; top:49px; width:74px; height:66px; background:#f0f3f6; border:4px solid #573d32; }
.pet-plaza-sprite-stage[data-species='penguin'] .pet-nose { left:58px; top:58px; width:18px; height:12px; background:#f0ad41; z-index:5; }
.pet-plaza-sprite-stage[data-species='penguin'] .pet-nose::after { display:none; }
.pet-plaza-sprite-stage[data-species='penguin'] .pet-tail { left:18px; top:132px; width:45px; height:20px; transform:rotate(15deg); }
.pet-plaza-sprite-stage[data-species='white-parrot'] .pet-head,.pet-plaza-sprite-stage[data-species='white-parrot'] .pet-body,.pet-plaza-sprite-stage[data-species='white-parrot'] .pet-tail { background:#e8edf0; }
.pet-plaza-sprite-stage[data-species='white-parrot'] .pet-head { top:54px; box-shadow:inset 12px 0 #fff; }
.pet-plaza-sprite-stage[data-species='white-parrot'] .pet-body { top:117px; height:82px; box-shadow:inset 10px 0 #f7fbfd; }
.pet-plaza-sprite-stage[data-species='white-parrot'] .pet-ear { display:none; }
.pet-plaza-sprite-stage[data-species='white-parrot'] .pet-head::before { content:''; position:absolute; left:50px; top:-31px; width:27px; height:36px; background:#edf1f3; border:5px solid #573d32; transform:skewX(-14deg); }
.pet-plaza-sprite-stage[data-species='white-parrot'] .pet-nose { left:56px; top:61px; width:24px; height:15px; background:#e8a743; z-index:5; }
.pet-plaza-sprite-stage[data-species='white-parrot'] .pet-nose::after { display:none; }
.pet-plaza-sprite-stage[data-species='white-parrot'] .pet-tail { left:165px; top:129px; width:63px; height:19px; transform:rotate(25deg); }
.pet-plaza-sprite-stage[data-species='sulcata-tortoise'] .pet-head { left:98px; top:99px; width:67px; height:60px; background:#b0a268; box-shadow:inset 8px 0 #cbc087; z-index:4; }
.pet-plaza-sprite-stage[data-species='sulcata-tortoise'] .pet-body { left:35px; top:108px; width:165px; height:76px; background:#78834c; border-radius:44% 44% 8px 8px; box-shadow:inset 14px 0 #9c9e5d; }
.pet-plaza-sprite-stage[data-species='sulcata-tortoise'] .pet-body::before { content:''; position:absolute; left:41px; top:-50px; width:96px; height:86px; background:#897c46; border:5px solid #573d32; border-radius:44% 44% 12px 12px; box-shadow:inset 12px 0 #a79858; }
.pet-plaza-sprite-stage[data-species='sulcata-tortoise'] .pet-body::after { background:#b0a268; box-shadow:45px 0 0 #b0a268,45px 0 0 4px #573d32; }
.pet-plaza-sprite-stage[data-species='sulcata-tortoise'] .pet-ear { display:none; }
.pet-plaza-sprite-stage[data-species='sulcata-tortoise'] .pet-eye { top:22px; }
.pet-plaza-sprite-stage[data-species='sulcata-tortoise'] .pet-nose { left:28px; top:43px; background:#77834a; }
.pet-plaza-sprite-stage[data-species='sulcata-tortoise'] .pet-tail { left:15px; top:145px; width:38px; height:17px; background:#b0a268; transform:rotate(-16deg); }
.pet-plaza-sprite-stage[data-species='grey-hamster'] .pet-head,.pet-plaza-sprite-stage[data-species='grey-hamster'] .pet-body,.pet-plaza-sprite-stage[data-species='grey-hamster'] .pet-tail { background:#9ba1a8; }
.pet-plaza-sprite-stage[data-species='grey-hamster'] .pet-head { top:58px; box-shadow:inset 12px 0 #bfc4ca; }
.pet-plaza-sprite-stage[data-species='grey-hamster'] .pet-body { top:118px; box-shadow:inset 10px 0 #b2b7bd; }
.pet-plaza-sprite-stage[data-species='grey-hamster'] .pet-ear { top:-19px; width:38px; height:38px; background:#a9afb5; border-radius:50%; z-index:-1; }
.pet-plaza-sprite-stage[data-species='grey-hamster'] .pet-ear::after { inset:9px; background:#d993a7; border-radius:50%; }
.pet-plaza-sprite-stage[data-species='grey-hamster'] .pet-ear-left { left:4px; transform:none; }
.pet-plaza-sprite-stage[data-species='grey-hamster'] .pet-ear-right { right:4px; transform:none; }
.pet-plaza-sprite-stage[data-species='grey-hamster'] .pet-tail { display:none; }
.pet-plaza-sprite-stage[data-species='grey-hamster'] .pet-head::after { content:''; position:absolute; left:45px; top:65px; width:35px; height:22px; background:#e9e3dc; border:3px solid #573d32; }
/* ===== 宠物舞台 Chrome 修复：外层舞台与精灵舞台彻底拆分 ===== */
.pet-plaza-field .pet-plaza-mini-stage,
.pet-plaza-detail .pet-plaza-detail-stage {
position:relative;
display:block;
width:118px;
height:96px;
flex:0 0 96px;
min-height:0;
overflow:visible;
background:transparent;
border:0;
box-shadow:none;
outline:0;
border-radius:0;
backdrop-filter:none;
-webkit-backdrop-filter:none;
transform:none;
animation:none;
contain:layout style;
}
.pet-plaza-detail .pet-plaza-detail-stage {
width:54px;
height:48px;
flex:0 0 54px;
}
.pet-plaza-field .pet-plaza-sprite-stage,
.pet-plaza-detail .pet-plaza-sprite-stage {
position:absolute;
left:50%;
top:0;
width:230px;
height:210px;
min-height:0;
overflow:visible;
background:transparent;
border:0;
box-shadow:none;
outline:0;
border-radius:0;
backdrop-filter:none;
-webkit-backdrop-filter:none;
transform:translateX(-50%) scale(.43);
transform-origin:top center;
animation:none;
}
.pet-plaza-detail .pet-plaza-sprite-stage {
transform:translateX(-50%) scale(.22);
}
.pet-plaza-field .pet-plaza-sprite-stage::before,
.pet-plaza-field .pet-plaza-sprite-stage::after,
.pet-plaza-detail .pet-plaza-sprite-stage::before,
.pet-plaza-detail .pet-plaza-sprite-stage::after {
content:none;
display:none;
}
.pet-plaza-field .pet-plaza-sprite-stage .pixel-pet,
.pet-plaza-detail .pet-plaza-sprite-stage .pixel-pet {
top:0;
left:50%;
transform:translateX(-50%);
animation:none;
filter:none;
}
.pet-plaza-field .pet-plaza-sprite-stage .pixel-pet *,
.pet-plaza-detail .pet-plaza-sprite-stage .pixel-pet * {
animation:none;
transition:none;
}
.pet-plaza-field .pet-plaza-sprite-stage .pet-head,
.pet-plaza-field .pet-plaza-sprite-stage .pet-body,
.pet-plaza-field .pet-plaza-sprite-stage .pet-tail,
.pet-plaza-field .pet-plaza-sprite-stage .pet-ear,
.pet-plaza-field .pet-plaza-sprite-stage .pet-body::before,
.pet-plaza-field .pet-plaza-sprite-stage .pet-body::after,
.pet-plaza-field .pet-plaza-sprite-stage .pet-head::before,
.pet-plaza-field .pet-plaza-sprite-stage .pet-head::after,
.pet-plaza-detail .pet-plaza-sprite-stage .pet-head,
.pet-plaza-detail .pet-plaza-sprite-stage .pet-body,
.pet-plaza-detail .pet-plaza-sprite-stage .pet-tail,
.pet-plaza-detail .pet-plaza-sprite-stage .pet-ear {
border-color:rgba(87,61,50,.16);
}
.pet-plaza-field .pet-plaza-resident,
.pet-plaza-field .pet-plaza-resident:hover,
.pet-plaza-field .pet-plaza-resident:focus,
.pet-plaza-field .pet-plaza-resident:active,
.pet-plaza-field .pet-plaza-resident:hover:not(:disabled),
.pet-plaza-field .pet-plaza-resident:active:not(:disabled) {
transform:translate(-50%,-50%) scale(var(--s,1));
animation:none;
background:transparent;
border:0;
box-shadow:none;
}
@media (max-width:560px) {
.pet-plaza-field .pet-plaza-resident,
.pet-plaza-field .pet-plaza-resident:hover,
.pet-plaza-field .pet-plaza-resident:focus,
.pet-plaza-field .pet-plaza-resident:active,
.pet-plaza-field .pet-plaza-resident:hover:not(:disabled),
.pet-plaza-field .pet-plaza-resident:active:not(:disabled) {
transform:translate(-50%,-50%) scale(calc(var(--s,1) * .9));
}
}
/* ===== miniadmin 专属图片宠物 + 狗狗彩蛋 ===== */
.pet-pixel-image img { display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center bottom; pointer-events:none; -webkit-user-drag:none; user-select:none; }
.pet-pixel-image .pet-image-fallback { display:none; position:absolute; inset:0; place-items:center; font-size:108px; line-height:1; filter:drop-shadow(0 15px 16px rgba(0,0,0,.18)); }
.pet-pixel-image.image-failed img { display:none; }
.pet-pixel-image.image-failed .pet-image-fallback { display:grid; }
.pet-stage[data-species='jiji'] .pixel-pet > :not(img):not(.pet-image-fallback),
.pet-stage[data-species='miniadmin-officer'] .pixel-pet > :not(img):not(.pet-image-fallback),
.pet-plaza-sprite-stage[data-species='jiji'] .pixel-pet > :not(img):not(.pet-image-fallback),
.pet-plaza-sprite-stage[data-species='miniadmin-officer'] .pixel-pet > :not(img):not(.pet-image-fallback) { display:none; }
.pet-stage[data-species='miniadmin-officer'] .pet-pixel-image { top:-6px; height:250px; }
.pet-stage[data-species='miniadmin-officer'] .pet-miniadmin-officer-image { filter:drop-shadow(0 20px 18px rgba(0,0,0,.22)); }
.pet-plaza-sprite-stage[data-species='miniadmin-officer'] .pet-pixel-image { top:-18px; height:250px; }
.pet-plaza-detail .pet-plaza-sprite-stage[data-species='miniadmin-officer'] .pet-pixel-image { top:-12px; height:235px; }
.pet-species-choice img.pet-miniadmin-officer-image { width:38px; height:38px; object-position:center bottom; }
.pet-stage[data-species='shadow-officer'] .pet-pixel-image { top:-6px; height:250px; }
.pet-stage[data-species='shadow-officer'] .pet-shadow-officer-image { filter:drop-shadow(0 20px 18px rgba(0,0,0,.24)); }
.pet-plaza-sprite-stage[data-species='shadow-officer'] .pet-pixel-image { top:-18px; height:250px; }
.pet-plaza-detail .pet-plaza-sprite-stage[data-species='shadow-officer'] .pet-pixel-image { top:-12px; height:235px; }
.pet-species-choice img.pet-shadow-officer-image { width:38px; height:38px; object-position:center bottom; }
.pet-plaza-bark { position:absolute; left:50%; top:-10px; z-index:30; max-width:150px; padding:7px 10px; border:1px solid color-mix(in srgb,var(--gold) 62%,var(--line)); border-radius:var(--radius-card); background:color-mix(in srgb,var(--panel) 94%,transparent); color:var(--gold); font-size:12px; font-weight:900; white-space:nowrap; box-shadow:0 12px 22px rgba(0,0,0,.18); opacity:0; transform:translate(-50%,-8px) scale(.86); pointer-events:none; transition:opacity .16s ease,transform .16s ease; }
.pet-plaza-bark.show { opacity:1; transform:translate(-50%,-22px) scale(1); animation:pet-bark-pop 1.8s ease both; }
@keyframes pet-bark-pop { 0% { opacity:0; transform:translate(-50%,-4px) scale(.8); } 18% { opacity:1; transform:translate(-50%,-24px) scale(1.08); } 78% { opacity:1; transform:translate(-50%,-22px) scale(1); } 100% { opacity:0; transform:translate(-50%,-34px) scale(.94); } }
@media (max-width:560px) {
.pet-plaza-pager { position:sticky; top:8px; z-index:20; padding:6px; border:1px solid color-mix(in srgb,var(--line) 65%,transparent); border-radius:var(--radius-chip); background:color-mix(in srgb,var(--panel) 88%,transparent); backdrop-filter:blur(10px); }
.pet-plaza-field { min-height:min(620px, calc(100svh - 190px)); }
.pet-plaza-bark { top:-14px; font-size:11px; max-width:132px; }
.pet-stage[data-species='miniadmin-officer'] .pet-pixel-image { top:0; height:232px; }
}
/* ===== 2026-08-23 全站 UI/UX 细节优化 ===== */
:root {
--tap-size:44px;
--copy-tight:-.02em;
--ease-out:cubic-bezier(.2,.8,.2,1);
}
body { text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; }
p,li,.sub,.tile span,.bubble,.changelog-text,.profile-card-preview p { line-height:1.68; }
button,input,textarea,select { font-size:max(16px, 1em); }
button, .tile, .today-card, .row-item, .dm-contact, .pet-species-choice { touch-action:manipulation; }
button:focus-visible,
.tile:focus-visible,
.today-card:focus-visible,
.newcomer-step:focus-visible,
.dm-contact:focus-visible,
.pet-species-choice:focus-visible,
.app-nav-item:focus-visible {
outline:3px solid color-mix(in srgb,var(--accent2) 78%,transparent);
outline-offset:3px;
box-shadow:0 0 0 6px color-mix(in srgb,var(--accent2) 16%,transparent), var(--shadow-md, 0 12px 28px rgba(0,0,0,.18));
}
button:disabled { filter:saturate(.8); }
.primary,
button.primary {
background:var(--accent);
}
.ghost { background:color-mix(in srgb,var(--panel) 48%,transparent); }
.ghost:hover:not(:disabled) { background:color-mix(in srgb,var(--panel) 70%,transparent); }
input::placeholder, textarea::placeholder { color:color-mix(in srgb,var(--muted) 76%,transparent); }
input:hover:not(:focus), textarea:hover:not(:focus), select:hover:not(:focus) { border-color:color-mix(in srgb,var(--accent2) 38%,var(--line)); }
.field-label { font-weight:800; letter-spacing:.02em; }
.msg:not(:empty) {
padding:8px 10px;
border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
border-radius:14px;
background:color-mix(in srgb,var(--accent) 8%,transparent);
}
.msg.muted:not(:empty) {
border-color:color-mix(in srgb,var(--line) 72%,transparent);
background:color-mix(in srgb,var(--panel) 28%,transparent);
}
.login-head h2,
.home-top h2,
.chat-top strong,
.profile-identity > strong,
.pet-title-row h2 { letter-spacing:var(--copy-tight); }
.badge,
.pill,
.site-stat,
.version-card,
.today-card,
.newcomer-step,
.tile,
.pet-home-status,
.profile-section,
.admin-panel,
.dm-contact,
.plaza-post,
.row-item {
transition:transform .18s var(--ease-out), border-color .18s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
}
.today-card:hover:not(:disabled),
.newcomer-step:hover:not(:disabled),
.dm-contact:hover:not(:disabled),
.row-item:hover,
.plaza-post:hover,
.pet-home-status:hover:not(:disabled) {
transform:translateY(-2px);
border-color:color-mix(in srgb,var(--accent2) 45%,var(--line));
}
.tile::after,
.today-card::after {
content:'';
position:absolute;
inset:0;
pointer-events:none;
border-radius:inherit;
background:none;
opacity:.42;
}
.today-card { position:relative; overflow:hidden; }
.today-card em,
.pet-home-main span,
.version-card-main span,
.small-text { color:color-mix(in srgb,var(--muted) 88%,var(--text)); }
.empty,.dm-empty { color:color-mix(in srgb,var(--muted) 88%,var(--text)); }
.changelog-item { align-items:flex-start; }
.changelog-date { padding-top:2px; }
.composer textarea,
#dmInput,
#plazaInput { line-height:1.55; }
.dm-message { max-width:min(78%, 560px); }
.dm-message-meta { margin-top:4px; }
.app-nav { backdrop-filter:blur(18px) saturate(1.15); -webkit-backdrop-filter:blur(18px) saturate(1.15); }
.app-nav-item { min-height:var(--tap-size); }
@media (max-width:760px) {
.app { width:100%; padding-left:14px; padding-right:14px; }
.hero,.login-card,.home-card,.card { border-radius:var(--radius-card); }
.hero { padding:18px; }
.hero-side { min-width:0; }
.login-card,.home-card { padding:18px; }
.home-top { align-items:flex-start; flex-direction:column; }
.home-top-right { width:100%; align-items:stretch; }
.site-stats { justify-content:flex-start; border-radius:var(--radius-control); }
.tiles { grid-template-columns:1fr; }
.tile { min-height:112px; padding:16px; }
.today-hub-list { gap:8px; }
.today-card { min-height:84px; }
.composer { gap:8px; }
.composer button { min-width:72px; padding:0 12px; }
.dm-message { max-width:88%; }
}
@media (max-width:420px) {
.app { padding-left:10px; padding-right:10px; }
h1 { font-size:31px; }
.theme-switch { max-width:100%; }
.tabs { overflow:visible; }
.tab { flex:1 1 0; min-width:0; white-space:normal; }
.today-hub-list { grid-template-columns:1fr 1fr; }
.today-card span { font-size:18px; }
.tile::before { width:38px; height:38px; border-radius:var(--radius-control); }
}
@media (prefers-reduced-motion:reduce) {
.tile::after,.today-card::after { display:none; }
}
/* ===== 移动端顶部开关横排 + 公开主页入口 ===== */
.plaza-author-btn { min-height:0; padding:0; border:0; border-radius:0; background:transparent; color:var(--accent2); box-shadow:none; font:inherit; font-weight:900; text-align:left; }
.plaza-author-btn:hover:not(:disabled) { filter:none; transform:none; text-decoration:underline; }
/* ===== 退出按钮移入已登录卡片 ===== */
.home-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.home-actions #loginEntryBtn,
.home-actions #logoutBtn { min-height:44px; border-radius:var(--radius-chip); padding:0 12px; }
@media (max-width:560px) {
.home-actions { width:100%; justify-content:space-between; }
.home-actions .changelog-btn { flex:1 1 auto; }
.home-actions #loginEntryBtn,
.home-actions #logoutBtn { flex:0 0 auto; }
}
/* ===== v2026.08.23 UIUX Redesign Phase 1 ===== */
:root {
--shell-max:1120px;
--motion-fast:.18s;
--motion-med:.28s;
}
html[data-mode='day'] {
--bg:#f4f2ee;
--card:#ffffff;
--card-rgb:255,255,255;
--panel:#ebe8e2;
--line:rgba(130,110,80,.20);
--text:#252525;
--muted:#686057;
--bg-glow:rgba(158,116,64,.10);
}
body {
background:var(--bg);
isolation:isolate;
}
.app { position:relative; z-index:1; }
.app { width:min(var(--shell-max),100%); }
.card-entering { animation:page-connect var(--motion-med) cubic-bezier(.2,.8,.2,1) both; }
@keyframes page-connect {
from { opacity:.01; transform:translateY(10px) scale(.992); filter:saturate(.96); }
to { opacity:1; transform:none; filter:none; }
}
.home-card { overflow:hidden; isolation:isolate; }
.home-card::before { height:250px; opacity:.95; }
.home-top {
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
gap:16px;
margin-bottom:16px;
border-radius:var(--radius-card);
background:var(--card);
}
.home-top h2 { margin-top:2px; font-size:40px; letter-spacing:0; }
.home-top-right { align-items:flex-end; }
.home-tools { grid-template-columns:minmax(250px,1fr) minmax(310px,auto); }
.home-search,
.home-filters,
.today-hub,
.home-jiji-guide,
.announce-block,
.pet-home-status {
box-shadow:0 14px 34px rgba(0,0,0,.13), inset 0 1px 0 rgba(255,255,255,.05);
}
.home-filters { justify-content:flex-end; }
.home-filter { min-height:44px; }
.today-hub {
position:relative;
z-index:1;
border:1px solid var(--line-soft);
border-radius:var(--radius-card);
padding:16px;
background:var(--card);
}
.today-hub-head strong { font-size:18px; letter-spacing:0; }
.today-card {
border-radius:var(--radius-card);
background:var(--card);
}
.home-jiji-guide {
position:relative;
z-index:1;
width:100%;
min-height:86px;
margin:14px 0;
padding:14px 16px;
display:flex;
align-items:center;
gap:14px;
text-align:left;
color:var(--text);
border:1px solid color-mix(in srgb,var(--gold) 38%,var(--line));
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--panel) 62%,transparent);
box-shadow:0 18px 42px color-mix(in srgb,var(--gold) 10%,rgba(0,0,0,.18));
}
.home-jiji-guide:hover:not(:disabled) { filter:none; transform:translateY(-2px); border-color:color-mix(in srgb,var(--gold) 70%,var(--line)); }
.home-jiji-guide img { width:62px; height:62px; object-fit:contain; flex:0 0 62px; pointer-events:none; filter:drop-shadow(0 10px 12px rgba(0,0,0,.22)); }
.home-jiji-guide span { display:flex; flex-direction:column; gap:4px; min-width:0; }
.home-jiji-guide strong { font-size:17px; color:var(--gold); }
.home-jiji-guide em { font-style:normal; color:var(--muted); font-size:13px; line-height:1.55; }
.home-zone-grid { grid-template-columns:repeat(12,minmax(0,1fr)); gap:14px; }
.home-zone-grid .tile-group-title {
grid-column:1 / -1;
margin:18px 0 0;
padding:0 2px;
display:flex;
align-items:center;
gap:10px;
color:var(--text);
font-size:13px;
letter-spacing:.08em;
}
.home-zone-grid .tile-group-title::before {
content:'';
width:9px;
height:9px;
border-radius:var(--radius-chip);
background:var(--accent);
box-shadow:0 0 16px color-mix(in srgb,var(--accent2) 58%,transparent);
}
.home-zone-grid .tile { grid-column:span 3; min-height:138px; border:1px solid color-mix(in srgb,var(--line-soft) 86%,transparent); }
.home-zone-grid .tile-feature { grid-column:span 6; }
.home-zone-grid .tile strong { font-size:18px; }
.home-zone-grid .tile span { max-width:33em; }
.tile { transform:translateZ(0); }
.tile:hover { transform:translateY(-4px) scale(1.008); }
.tile:active:not(:disabled) { transform:translateY(1px) scale(.992); }
.app-nav { grid-template-columns:repeat(4,1fr); width:min(470px, calc(100% - 24px)); border-radius:var(--radius-card); }
.app-nav-item { border-radius:19px; }
.app-nav-item.has-unread::after { right:14px; }
.jiji-mascot { transition:left .18s ease, top .18s ease, bottom .18s ease, right .18s ease; }
.jiji-mascot.dragging .jiji-btn { cursor:grabbing; animation:none; }
@media (min-width:980px) {
.home-card { padding:28px; }
.home-dashboard-side { display:block; }
}
@media (max-width:900px) {
.home-tools { grid-template-columns:1fr; }
.home-zone-grid .tile,
.home-zone-grid .tile-feature { grid-column:span 6; }
}
@media (max-width:620px) {
.app { padding-left:12px; padding-right:12px; }
.home-top { grid-template-columns:1fr; padding:16px; border-radius:var(--radius-card); }
.home-top-right { align-items:stretch; }
.home-filters { justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
.home-filters::-webkit-scrollbar { display:none; }
.home-filter { flex:0 0 auto; }
.home-jiji-guide { min-height:76px; border-radius:var(--radius-card); padding:12px; }
.home-jiji-guide img { width:52px; height:52px; flex-basis:52px; }
.home-zone-grid { grid-template-columns:1fr; gap:11px; }
.home-zone-grid .tile,
.home-zone-grid .tile-feature { grid-column:auto; min-height:104px; }
.home-zone-grid .tile-group-title { margin-top:14px; }
.app-nav { width:calc(100% - 18px); padding:7px; gap:5px; }
.app-nav-item { min-height:50px; padding:5px 4px; }
.app-nav-item strong { font-size:10px; }
}
@media (prefers-reduced-motion:reduce) {
.card-entering { animation:none; }
.tile:hover,
.home-jiji-guide:hover:not(:disabled),
.today-card:hover:not(:disabled) { transform:none; }
}
/* ===== v2026.08.23 UIUX Redesign Phase 2 ===== */
.messages-card {
border-radius:var(--radius-card);
background:var(--panel);
}
.messages-card .chat-top { min-height:70px; }
.dm-layout {
grid-template-columns:minmax(190px,240px) minmax(0,1fr);
gap:0;
background:var(--panel);
}
.dm-contacts { padding:14px; gap:10px; background:color-mix(in srgb,var(--panel) 34%,transparent); }
.dm-contact {
min-height:62px;
border-radius:18px;
padding:12px;
background:var(--card);
}
.dm-contact.active {
background:var(--accent);
transform:translateX(2px);
}
.dm-list {
gap:12px;
padding:18px;
background:var(--panel);
}
.dm-message {
max-width:min(78%, 620px);
display:grid;
grid-template-columns:34px minmax(0,1fr);
align-items:end;
gap:8px;
}
.dm-message.mine {
grid-template-columns:minmax(0,1fr) 34px;
align-self:flex-end;
}
.dm-message.mine .dm-avatar { grid-column:2; }
.dm-message.mine .dm-message-main { grid-column:1; grid-row:1; align-items:flex-end; }
.dm-message.theirs .dm-message-main { align-items:flex-start; }
.dm-avatar {
width:34px;
height:34px;
display:grid;
place-items:center;
border-radius:14px;
color:var(--on-accent);
background:var(--accent);
font-size:13px;
font-weight:900;
box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 18%,transparent);
}
.dm-message.theirs .dm-avatar { background:var(--accent2); }
.dm-message-main { min-width:0; display:flex; flex-direction:column; gap:4px; }
.dm-message-meta { padding:0 4px; opacity:.86; }
.dm-bubble { border-radius:var(--radius-card); padding:12px 14px; }
.dm-message.mine .dm-bubble { border-bottom-right-radius:8px; }
.dm-message.theirs .dm-bubble { border-bottom-left-radius:8px; }
.mail-request-box {
margin:10px 14px 14px;
border:1px solid var(--line-soft);
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--panel) 36%,transparent);
}
#dmForm.composer { border-top:1px solid var(--line-soft); }
#dmInput { border-radius:var(--radius-card); }
.pet-card { overflow:hidden; }
.pet-body-wrap {
background:var(--panel);
}
.pet-hero {
padding:14px;
border:1px solid var(--line-soft);
border-radius:var(--radius-card);
background:var(--card);
box-shadow:0 18px 42px rgba(0,0,0,.13), inset 0 1px 0 rgba(255,255,255,.05);
}
.pet-stage {
height:320px;
border-radius:var(--radius-card);
border-color:color-mix(in srgb,var(--accent2) 28%,var(--line));
box-shadow:inset 0 -54px 0 color-mix(in srgb,var(--panel) 42%,transparent),0 18px 40px rgba(0,0,0,.16);
}
.pet-scene-label {
top:14px;
left:14px;
border-radius:var(--radius-chip);
background:color-mix(in srgb,var(--card) 76%,transparent);
backdrop-filter:blur(12px);
}
.pet-stats {
border:1px solid var(--line-soft);
border-radius:var(--radius-card);
overflow:hidden;
background:color-mix(in srgb,var(--bg) 58%,transparent);
}
.pet-stat { padding:14px 12px; }
.pet-stat strong { font-size:22px; }
.pet-upgrade-dock {
bottom:10px;
border-radius:var(--radius-card);
padding:14px;
background:var(--card);
}
.pet-upgrade-main .pet-section-label strong { font-size:16px; }
.pet-upgrade-reward { font-size:13px; }
.pet-tabs {
position:sticky;
top:8px;
z-index:6;
padding:6px;
border:1px solid var(--line-soft);
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--card) 76%,transparent);
backdrop-filter:blur(16px);
}
.pet-tab { border-radius:var(--radius-control); }
.pet-pane {
border-radius:var(--radius-card);
background:var(--card);
}
.pet-action-row {
border-radius:18px;
padding:12px;
border:1px solid var(--line-soft);
background:color-mix(in srgb,var(--card) 50%,transparent);
}
.pet-plaza-card { overflow:hidden; }
.pet-plaza-field {
min-height:560px;
border-radius:var(--radius-card);
border-color:color-mix(in srgb,var(--accent2) 30%,var(--line));
background:color-mix(in srgb,var(--accent2) 14%,var(--panel));
box-shadow:inset 0 -56px 0 color-mix(in srgb,#86c95c 33%,transparent),0 20px 50px rgba(0,0,0,.16);
}
.pet-plaza-summary {
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--card) 80%,transparent);
}
.pet-plaza-pager {
display:flex;
align-items:center;
justify-content:center;
gap:10px;
margin:0 0 12px;
}
.pet-plaza-pager span {
min-height:34px;
display:inline-flex;
align-items:center;
padding:0 12px;
border:1px solid var(--line-soft);
border-radius:var(--radius-chip);
color:var(--muted);
background:color-mix(in srgb,var(--panel) 36%,transparent);
font-size:12px;
font-weight:900;
}
.pet-plaza-resident { transition:filter .18s ease, opacity .18s ease; }
.pet-plaza-resident.active .pet-plaza-mini-stage::before {
content:'';
position:absolute;
inset:8px 19px 10px;
display:block;
border-radius:var(--radius-chip);
background:color-mix(in srgb,var(--gold) 14%,transparent);
box-shadow:0 0 26px color-mix(in srgb,var(--gold) 32%,transparent);
}
.pet-plaza-name { box-shadow:0 8px 18px rgba(0,0,0,.16); }
.pet-plaza-detail {
border-radius:var(--radius-card);
background:var(--card);
}
#drawModeCard .draw-body .tiles,
.gomoku-lobby,
.snake-body,
.tank-body {
border-radius:var(--radius-card);
}
#drawModeCard .tile {
min-height:150px;
border-radius:var(--radius-card);
}
#drawModePublicBtn::before { content:'🎨'; }
#drawModeChainBtn::before { content:'🧵'; }
#drawModeRoomBtn::before { content:'🚪'; }
#drawModeLeaderboardBtn::before { content:'🏆'; }
.snake-card,
.tank-card,
.gomoku-card,
.draw-card {
background:var(--card);
}
.snake-screen,
.tank-screen,
.gomoku-board-wrap {
border-radius:var(--radius-card);
box-shadow:0 22px 52px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
}
.snake-controls,
.tank-controls,
.gomoku-actions {
padding:8px;
border:1px solid var(--line-soft);
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--panel) 30%,transparent);
}
.snake-dpad-grid { gap:8px; }
.snake-dir,
.tank-fire-pad {
border-radius:18px;
box-shadow:0 8px 18px rgba(0,0,0,.16);
}
@media (max-width:620px) {
.messages-card { height:calc(100dvh - 72px); border-radius:var(--radius-card); }
.messages-card .chat-top { min-height:58px; }
.dm-layout { grid-template-columns:1fr; }
.dm-list { padding:14px 10px; }
.dm-message { max-width:94%; grid-template-columns:30px minmax(0,1fr); gap:7px; }
.dm-message.mine { grid-template-columns:minmax(0,1fr) 30px; }
.dm-avatar { width:30px; height:30px; border-radius:var(--radius-control); font-size:12px; }
.dm-bubble { padding:11px 12px; font-size:14px; }
.mail-request-box { margin:8px 10px 10px; }
.pet-stage { height:270px; }
.pet-upgrade-dock { grid-template-columns:1fr; bottom:8px; }
.pet-upgrade-btn { width:100%; }
.pet-tabs { overflow:auto; scrollbar-width:none; }
.pet-tabs::-webkit-scrollbar { display:none; }
.pet-tab { flex:0 0 auto; min-width:74px; }
.pet-plaza-field { min-height:610px; border-radius:var(--radius-card); }
.pet-plaza-summary { max-width:calc(100% - 28px); }
.pet-plaza-pager { justify-content:space-between; }
.snake-body,.tank-body,.gomoku-body,.draw-body { padding:12px; }
.snake-controls,.tank-controls,.gomoku-actions { width:100%; }
}
/* ===== v2026.08.23-1337 UIUX Redesign Phase 3：叽叽陪同式动线 ===== */
:root {
--section-tint:var(--accent2);
--section-tint-2:var(--gold);
--page-ease:cubic-bezier(.16,1,.3,1);
--press-ease:cubic-bezier(.2,.8,.2,1);
}
body[data-nav-section='daily'],
body[data-nav-section='home'] { --section-tint:var(--accent2); --section-tint-2:var(--gold); }
body[data-nav-section='friends'] { --section-tint:#8bd3ff; --section-tint-2:#ff8fb1; }
body[data-nav-section='pets'] { --section-tint:#8ee78f; --section-tint-2:#ffd166; }
body[data-nav-section='games'] { --section-tint:#bca4ff; --section-tint-2:#67e8f9; }
body[data-nav-section='admin'] { --section-tint:#ffd166; --section-tint-2:#ff7b72; }
body::after {
content:'';
position:fixed;
inset:auto -12vw -20vh auto;
width:min(520px,62vw);
height:min(520px,62vw);
border-radius:var(--radius-chip);
pointer-events:none;
background:none;
filter:blur(10px);
opacity:.78;
transform:translateZ(0);
transition:background .38s var(--page-ease), opacity .28s ease;
z-index:0;
}
.card-entering {
animation:page-connect-deep .34s var(--page-ease) both;
}
@keyframes page-connect-deep {
from { opacity:.001; transform:translateY(14px) scale(.988); filter:blur(5px) saturate(.92); }
62% { opacity:1; filter:blur(0) saturate(1.02); }
to { opacity:1; transform:none; filter:none; }
}
.home-card,
.login-card,
.chat-card,
.messages-card,
.pet-card,
.pet-plaza-card,
.draw-card,
.snake-card,
.tank-card,
.gomoku-card,
.status-card,
.feedback-card,
.fortune-card,
.checkin-card {
border-color:color-mix(in srgb,var(--section-tint) 18%,var(--line-soft));
}
.home-top,
.today-hub,
.home-jiji-guide,
.pet-hero,
.pet-plaza-field,
.messages-card .chat-top,
.chat-card .chat-top {
box-shadow:
0 18px 44px rgba(0,0,0,.16),
0 0 0 1px color-mix(in srgb,var(--section-tint) 10%,transparent),
inset 0 1px 0 rgba(255,255,255,.05);
}
.tile,
.today-card,
.app-nav-item,
.pet-tab,
.tab,
.ghost,
button.primary {
transition:
transform .18s var(--press-ease),
border-color .22s ease,
background .28s ease,
box-shadow .24s ease,
color .18s ease,
opacity .18s ease,
filter .18s ease;
}
.tile:hover {
border-color:color-mix(in srgb,var(--section-tint) 48%,var(--line));
box-shadow:
0 20px 48px rgba(0,0,0,.22),
0 0 0 1px color-mix(in srgb,var(--section-tint) 36%,transparent);
}
.tile::before {
color:var(--section-tint);
border-color:color-mix(in srgb,var(--section-tint) 26%,transparent);
background:color-mix(in srgb,var(--section-tint) 12%,transparent);
}
.app-nav {
border-color:color-mix(in srgb,var(--section-tint) 24%,var(--line-soft));
}
.app-nav-item.active {
background:var(--accent);
}
.jiji-context-chip {
max-width:190px;
min-height:28px;
padding:5px 10px;
border:1px solid color-mix(in srgb,var(--gold) 34%,var(--line));
border-radius:var(--radius-chip);
color:color-mix(in srgb,var(--gold) 84%,var(--text));
background:color-mix(in srgb,var(--panel) 88%,transparent);
box-shadow:0 10px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05);
font-size:11px;
font-weight:900;
line-height:1.2;
text-align:center;
pointer-events:none;
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
opacity:.92;
}
.jiji-mascot[data-mood='talk'] .jiji-context-chip {
border-color:color-mix(in srgb,var(--section-tint) 34%,var(--line));
color:color-mix(in srgb,var(--section-tint) 84%,var(--text));
}
.jiji-chat-panel {
border-color:color-mix(in srgb,var(--section-tint) 28%,var(--gold));
}
.jiji-chat-head strong::before {
content:'🐥 ';
}
.jiji-chat-form textarea:focus {
border-color:color-mix(in srgb,var(--section-tint) 60%,var(--accent2));
}
.theme-switch {
padding:8px;
border:1px solid color-mix(in srgb,var(--line-soft) 70%,transparent);
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--card) 48%,transparent);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
.theme-mode-btn.active,
.liquid-glass-toggle.active {
color:var(--on-accent);
border-color:color-mix(in srgb,var(--section-tint) 50%,var(--accent));
background:var(--accent);
}
html[data-liquid-glass] body::after {
animation:none;
transform:translateZ(0);
}
html[data-liquid-glass] .today-card,
html[data-liquid-glass] .tile {
backdrop-filter:none;
-webkit-backdrop-filter:none;
}
@media (hover:hover) and (pointer:fine) {
.today-card:hover span,
.tile:hover::before {
transform:translateY(-1px) scale(1.03);
}
}
@media (max-width:760px) {
body::after {
width:72vw;
height:72vw;
inset:auto -20vw -18vh auto;
opacity:.55;
}
}
@media (max-width:560px) {
.jiji-context-chip { display:none; }
.jiji-chat-panel {
position:fixed;
left:10px;
right:10px;
bottom:max(84px, calc(74px + env(safe-area-inset-bottom)));
width:auto;
}
}
@media (prefers-reduced-motion:reduce) {
body::after,
.card-entering {
animation:none;
transition:none;
}
}
/* ===== v2026.08.23-1343：功能页连接线 + 叽叽巡逻态 ===== */
.chat-top,
.changelog-head,
.today-hub-head,
.pet-space-head,
.profile-section-head,
.snake-leaderboard-head {
position:relative;
}
.chat-top::after,
.today-hub-head::after,
.pet-space-head::after {
content:'';
position:absolute;
left:16px;
right:16px;
bottom:-1px;
height:1px;
border-radius:var(--radius-chip);
background:var(--card);
opacity:.78;
pointer-events:none;
transform-origin:left center;
animation:section-line-in .42s var(--page-ease) both;
}
@keyframes section-line-in {
from { transform:scaleX(.18); opacity:.05; }
to { transform:scaleX(1); opacity:.78; }
}
.app-busy .jiji-context-chip {
color:color-mix(in srgb,var(--section-tint) 86%,var(--text));
border-color:color-mix(in srgb,var(--section-tint) 44%,var(--line));
}
.app-busy .jiji-context-chip::after {
content:' · 处理中';
}
.jiji-mascot.jiji-busy .jiji-btn {
animation:jiji-deliver .74s ease-in-out infinite;
}
.jiji-mascot.jiji-busy .jiji-btn img {
filter:
drop-shadow(0 14px 18px rgba(0,0,0,.30))
drop-shadow(0 0 12px color-mix(in srgb,var(--section-tint) 36%,transparent));
}
@keyframes jiji-deliver {
0%,100% { transform:translateY(0) rotate(-1deg); }
45% { transform:translateY(-5px) rotate(3deg); }
}
.app-busy .home-search,
.app-busy .composer,
.app-busy .pet-upgrade-dock {
border-color:color-mix(in srgb,var(--section-tint) 30%,var(--line-soft));
}
.app-busy .home-search::after,
.app-busy .composer::after,
.app-busy .pet-upgrade-dock::after {
content:'';
position:absolute;
inset:auto 14px 7px;
height:2px;
border-radius:var(--radius-chip);
background:var(--card);
opacity:.55;
animation:busy-scan 1.1s linear infinite;
pointer-events:none;
}
.home-search,
.composer,
.pet-upgrade-dock {
position:relative;
}
@keyframes busy-scan {
from { transform:translateX(-18%); }
to { transform:translateX(18%); }
}
@media (max-width:620px) {
.chat-top::after,
.today-hub-head::after,
.pet-space-head::after {
left:12px;
right:12px;
}
.app-nav-visible .app {
padding-bottom:max(104px, calc(92px + env(safe-area-inset-bottom)));
}
body.app-nav-suppressed .app {
padding-bottom:max(16px, env(safe-area-inset-bottom));
}
}
@media (prefers-reduced-motion:reduce) {
.jiji-mascot.jiji-busy .jiji-btn,
.app-busy .home-search::after,
.app-busy .composer::after,
.app-busy .pet-upgrade-dock::after,
.chat-top::after,
.today-hub-head::after,
.pet-space-head::after {
animation:none;
}
}/* ===== v2026.08.23-1343：后台/状态/个人页统一信息卡语言 ===== */
.profile-overview,
.profile-card-preview,
.profile-section,
.health-card,
.health-detail,
.status-item,
.row-item,
.plaza-post,
.dm-contact,
.mail-request-box{
border-color:color-mix(in srgb,var(--section-tint) 14%,var(--line-soft));
background:var(--card);
}
.admin-panel{
border-color:color-mix(in srgb,var(--admin-accent) 14%,var(--admin-line-soft));
background:var(--admin-card);
}
.profile-avatar,
.dm-avatar,
.review-count.active,
.health-card strong,
.status-item strong {
text-shadow:0 1px 0 rgba(0,0,0,.08);
}
.profile-avatar {
border-radius:var(--radius-card);
border-color:color-mix(in srgb,var(--section-tint) 42%,var(--line));
background:var(--accent);
}
.profile-meta .pill,
.pill,
.health-check,
.site-stat {
border-color:color-mix(in srgb,var(--section-tint) 24%,var(--line));
background:color-mix(in srgb,var(--section-tint) 6%,transparent);
}
.admin-dashboard {
align-items:start;
}
.admin-panel {
box-shadow:0 14px 34px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.04);
}.profile-section-head strong::before{
background:var(--accent);
}
.admin-panel h3::before{
background:var(--admin-accent);
}
.health-grid,
.status-grid {
gap:12px;
}
.health-card,
.status-item {
min-height:88px;
border-radius:var(--radius-card);
box-shadow:0 10px 24px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.04);
}.health-card:hover,
.status-item:hover,
.profile-section:hover{
border-color:color-mix(in srgb,var(--section-tint) 34%,var(--line));
}
.admin-panel:hover{
border-color:color-mix(in srgb,var(--admin-accent) 34%,var(--admin-line));
}
.row-item-actions {
align-items:center;
flex-wrap:wrap;
justify-content:flex-end;
}
.row-item-actions button,
.plaza-actions button,
.feedback-read-row button,
.health-actions button {
border-radius:var(--radius-chip);
}
.changelog-item {
border-color:color-mix(in srgb,var(--section-tint) 14%,var(--line));
background:var(--card);
}
.changelog-date {
color:color-mix(in srgb,var(--section-tint) 68%,var(--muted));
}
@media (max-width:760px) {
.profile-overview {
gap:12px;
}
.profile-avatar {
width:68px;
height:68px;
flex-basis:68px;
border-radius:var(--radius-card);
}
.admin-panel,
.profile-section,
.health-card,
.status-item {
border-radius:18px;
}
.row-item {
align-items:flex-start;
}
.row-item-actions {
width:100%;
justify-content:flex-start;
}
}
/* ===== v2026.08.23-1428：全站 UI/UX 最终收口层 ===== */
:root {
--tap-size:44px;
--soft-lift:0 18px 46px rgba(0,0,0,.18);
--soft-inner:inset 0 1px 0 rgba(255,255,255,.055);
}
html { scroll-padding-top:16px; }
body {
min-width:320px;
overflow-x:hidden;
}
button,
select,
input,
textarea,
.tile,
.home-jiji-guide,
.pet-plaza-resident {
-webkit-tap-highlight-color:transparent;
}
button,
.tab,
.home-filter,
.today-card,
.tile,
.pet-tab,
.app-nav-item {
min-height:var(--tap-size);
}
button:disabled,
select:disabled,
input:disabled,
textarea:disabled {
cursor:not-allowed;
opacity:.58;
transform:none;
filter:saturate(.72);
}
.card:not(.hidden) {
box-shadow:var(--soft-lift), var(--soft-inner);
}.chat-top,
.home-top,
.today-hub,
.pet-hero,
.pet-pane,
.profile-section,
.status-item,
.row-item,
.plaza-post,
.dm-contact,
.mail-request-box{
border-color:color-mix(in srgb,var(--section-tint) 16%,var(--line-soft));
}
.admin-panel{
border-color:color-mix(in srgb,var(--admin-accent) 16%,var(--admin-line-soft));
}
.tile,
.today-card,
.dm-contact,
.pet-space-action,
.pet-shop-item,
.row-item {
transform:translate3d(0,0,0);
}
@media (hover:hover) and (pointer:fine) {
.dm-contact:hover,
.pet-space-action:hover,
.pet-shop-item:hover,
.row-item:hover {
transform:translateY(-1px);
box-shadow:0 12px 28px rgba(0,0,0,.13);
}
}
/* Liquid Glass 只留在按钮/可点击控件上，输入框回归稳定表面，避免 Safari 大面积重绘 */
html[data-liquid-glass] input,
html[data-liquid-glass] textarea,
html[data-liquid-glass] select {
overflow:visible;
isolation:auto;
background:color-mix(in srgb,var(--card) 86%,var(--bg));
border-color:var(--line-soft);
box-shadow:none;
backdrop-filter:none;
-webkit-backdrop-filter:none;
will-change:auto;
}
html[data-liquid-glass] input::before,
html[data-liquid-glass] input::after,
html[data-liquid-glass] textarea::before,
html[data-liquid-glass] textarea::after,
html[data-liquid-glass] select::before,
html[data-liquid-glass] select::after,
html[data-liquid-glass] body::before,
html[data-liquid-glass] body::after,
html[data-liquid-glass] .hero::before,
html[data-liquid-glass] .hero::after,
html[data-liquid-glass] .card::before,
html[data-liquid-glass] .card::after {
content:none;
animation:none;
}
html[data-liquid-glass] .tile,
html[data-liquid-glass] .today-card,
html[data-liquid-glass] .home-jiji-guide {
backdrop-filter:none;
-webkit-backdrop-filter:none;
}
/* 移动端不把时间塞进气泡附近；点开也不主动聚焦输入 */
.dm-message-meta time {
color:color-mix(in srgb,var(--muted) 78%,transparent);
}
@media (max-width:620px) {
.messages-card {
height:calc(100dvh - 70px);
max-height:calc(100dvh - 18px);
}
.dm-message-meta time {
display:none;
}
#dmInput,
#jijiChatInput,
#input {
font-size:16px;
}
}
/* 宠物展示舞台隔离：宠物透明背景，hover 只发光不位移 */
.pet-plaza-field .pet-plaza-resident,
.pet-plaza-field .pet-plaza-resident:hover,
.pet-plaza-field .pet-plaza-resident:focus,
.pet-plaza-field .pet-plaza-resident:active,
.pet-plaza-field .pet-plaza-resident:hover:not(:disabled),
.pet-plaza-field .pet-plaza-resident:active:not(:disabled) {
background:transparent;
border:0;
box-shadow:none;
transform:translate(-50%,-50%) scale(var(--s,1));
}
.pet-plaza-field .pet-plaza-mini-stage,
.pet-plaza-field .pet-plaza-sprite-stage,
.pet-plaza-detail .pet-plaza-detail-stage,
.pet-plaza-detail .pet-plaza-sprite-stage {
background:transparent;
border:0;
box-shadow:none;
backdrop-filter:none;
-webkit-backdrop-filter:none;
}
.pet-plaza-field .pet-plaza-sprite-stage .pixel-pet,
.pet-plaza-detail .pet-plaza-sprite-stage .pixel-pet {
background:transparent;
}
@media (max-width:560px) {
.pet-plaza-field .pet-plaza-resident,
.pet-plaza-field .pet-plaza-resident:hover,
.pet-plaza-field .pet-plaza-resident:focus,
.pet-plaza-field .pet-plaza-resident:active,
.pet-plaza-field .pet-plaza-resident:hover:not(:disabled),
.pet-plaza-field .pet-plaza-resident:active:not(:disabled) {
transform:translate(-50%,-50%) scale(calc(var(--s,1) * .9));
}
}
/* 叽叽陪同感增强，但不再抢键盘和主内容空间 */
.jiji-mascot {
max-width:calc(100dvw - 20px);
}
.jiji-mascot.side-left {
align-items:flex-start;
}
.jiji-mascot.side-left .jiji-bubble {
border-radius:16px 16px 16px 4px;
}
.jiji-chat-panel {
overscroll-behavior:contain;
}
.jiji-chat-messages,
.dm-list,
.pet-shop-list,
.pet-task-list,
.pet-leaderboard {
scroll-behavior:smooth;
}
@media (max-width:560px) {
.jiji-mascot:not(.is-positioned) {
right:max(10px, env(safe-area-inset-right));
}
.jiji-bubble.show {
display:none;
}
.jiji-chat-panel {
bottom:max(84px, calc(74px + env(safe-area-inset-bottom)));
}
body.app-nav-suppressed .jiji-chat-panel {
bottom:max(16px, env(safe-area-inset-bottom));
}
body.app-nav-suppressed .jiji-mascot:not(.jiji-chat-open) {
display:none;
}
.theme-switch {
grid-template-columns:repeat(4,minmax(0,1fr));
}
.theme-palette-toggle,
.theme-mode-btn {
font-size:11px;
letter-spacing:0;
}
}
@media (prefers-reduced-motion:reduce) {
.dm-contact:hover,
.pet-space-action:hover,
.pet-shop-item:hover,
.row-item:hover {
transform:none;
}
.jiji-chat-messages,
.dm-list,
.pet-shop-list,
.pet-task-list,
.pet-leaderboard {
scroll-behavior:auto;
}
}
/* ===== v2026.08.23-compact-home：朋友星球首页主入口 ===== */
.home-planet-grid {
position:relative;
z-index:2;
display:grid;
grid-template-columns:repeat(12,minmax(0,1fr));
gap:14px;
margin:16px 0 12px;
}
.home-zone-card {
grid-column:span 4;
min-height:190px;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:12px;
padding:14px;
border:1px solid color-mix(in srgb,var(--section-tint) 16%,var(--line-soft));
border-radius:var(--radius-card);
background:var(--card);
box-shadow:0 18px 44px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.055);
overflow:hidden;
}
.home-zone-card:nth-child(1),
.home-zone-card:nth-child(2) {
grid-column:span 6;
}
.zone-friends { --zone-glow:#8bd3ff; }
.zone-pets { --zone-glow:#8ee78f; }
.zone-games { --zone-glow:#bca4ff; }
.zone-ai { --zone-glow:#ffd166; }
.zone-status { --zone-glow:#67e8f9; }
.zone-admin { --zone-glow:#ff9a9e; }
.home-zone-main {
width:100%;
min-height:112px;
padding:14px;
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:flex-end;
gap:5px;
text-align:left;
color:var(--text);
border:1px solid color-mix(in srgb,var(--zone-glow,var(--section-tint)) 28%,var(--line-soft));
border-radius:var(--radius-card);
background:var(--card);
box-shadow:none;
}
.home-zone-main span {
color:color-mix(in srgb,var(--zone-glow,var(--section-tint)) 84%,var(--text));
font-size:12px;
font-weight:950;
letter-spacing:.12em;
}
.home-zone-main strong {
font-size:28px;
line-height:1.05;
letter-spacing:0;
}
.home-zone-main em {
max-width:32em;
color:var(--muted);
font-size:13px;
font-style:normal;
line-height:1.45;
}
.home-zone-actions {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
}
.home-zone-actions button {
min-height:44px;
padding:0 12px;
color:var(--text);
border:1px solid color-mix(in srgb,var(--zone-glow,var(--section-tint)) 24%,var(--line-soft));
border-radius:var(--radius-chip);
background:color-mix(in srgb,var(--zone-glow,var(--section-tint)) 8%,transparent);
box-shadow:none;
font-size:12px;
white-space:nowrap;
}
.home-zone-actions button:hover:not(:disabled),
.home-zone-main:hover:not(:disabled) {
filter:none;
border-color:color-mix(in srgb,var(--zone-glow,var(--section-tint)) 48%,var(--line));
box-shadow:0 12px 28px color-mix(in srgb,var(--zone-glow,var(--section-tint)) 12%,rgba(0,0,0,.12));
}
.home-more-toggle {
position:relative;
z-index:2;
width:100%;
margin:2px 0 10px;
border-radius:var(--radius-card);
color:color-mix(in srgb,var(--section-tint) 76%,var(--text));
background:color-mix(in srgb,var(--card) 44%,transparent);
}
.home-more-panel.collapsed {
display:none !important;
}
.home-more-panel {
animation:home-more-in .22s var(--page-ease) both;
}
.home-pulse {
position:relative;
z-index:2;
margin:14px 0 0;
padding:14px 0 0;
border-top:1px solid color-mix(in srgb,var(--section-tint) 16%,var(--line-soft));
border-radius:0;
background:transparent;
box-shadow:none;
}
.home-pulse .home-pulse-head strong {
font-size:15px;
}
.home-pulse-head {
display:flex;
align-items:baseline;
justify-content:space-between;
gap:12px;
margin-bottom:10px;
}
.home-pulse-head strong {
font-size:17px;
letter-spacing:0;
}
.home-pulse-list {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}
.home-pulse-item {
min-height:74px;
padding:12px;
display:grid;
grid-template-columns:34px minmax(0,1fr);
align-items:center;
column-gap:10px;
row-gap:2px;
text-align:left;
border-radius:var(--radius-card);
border:1px solid color-mix(in srgb,var(--line-soft) 82%,transparent);
background:color-mix(in srgb,var(--panel) 46%,transparent);
box-shadow:none;
}
.home-pulse-item span {
grid-row:1 / span 2;
width:34px;
height:34px;
display:grid;
place-items:center;
border-radius:14px;
background:color-mix(in srgb,var(--section-tint) 13%,transparent);
}
.home-pulse-item strong {
color:var(--text);
font-size:14px;
}
.home-pulse-item em {
min-width:0;
color:var(--muted);
font-size:12px;
font-style:normal;
line-height:1.45;
}
.home-pulse-item.hot {
border-color:color-mix(in srgb,var(--gold) 44%,var(--line));
background:var(--card);
}
.home-pulse-item:hover:not(:disabled) {
filter:none;
border-color:color-mix(in srgb,var(--section-tint) 42%,var(--line));
box-shadow:0 10px 26px color-mix(in srgb,var(--section-tint) 10%,rgba(0,0,0,.12));
}
.notification-center {
position:relative;
z-index:2;
margin:14px 0 16px;
padding:14px;
border:1px solid color-mix(in srgb,var(--section-tint) 16%,var(--line-soft));
border-radius:var(--radius-card);
background:var(--card);
box-shadow:0 16px 38px rgba(0,0,0,.13), inset 0 1px 0 rgba(255,255,255,.055);
}
.notification-center .home-pulse-head > div {
display:flex;
flex-direction:column;
gap:3px;
}
.notification-list {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
gap:10px;
}
.notification-item {
min-height:76px;
padding:12px;
display:grid;
grid-template-columns:34px minmax(0,1fr);
align-items:center;
column-gap:10px;
row-gap:2px;
text-align:left;
border-radius:var(--radius-card);
border:1px solid color-mix(in srgb,var(--line-soft) 82%,transparent);
background:color-mix(in srgb,var(--panel) 46%,transparent);
box-shadow:none;
}
.notification-item span {
grid-row:1 / span 2;
width:34px;
height:34px;
display:grid;
place-items:center;
border-radius:14px;
color:var(--on-accent);
background:color-mix(in srgb,var(--accent2) 70%,var(--section-tint));
font-weight:900;
}
.notification-item strong {
color:var(--text);
font-size:14px;
}
.notification-item em {
min-width:0;
color:var(--muted);
font-size:12px;
font-style:normal;
line-height:1.45;
}
.notification-item.hot {
border-color:color-mix(in srgb,var(--gold) 44%,var(--line));
background:var(--card);
}
.notification-item:hover:not(:disabled) {
filter:none;
border-color:color-mix(in srgb,var(--section-tint) 42%,var(--line));
box-shadow:0 10px 26px color-mix(in srgb,var(--section-tint) 10%,rgba(0,0,0,.12));
}
.newcomer-guide {
position:relative;
z-index:2;
margin:14px 0 0;
padding:14px 0 0;
border-top:1px solid color-mix(in srgb,var(--section-tint) 16%,var(--line-soft));
border-radius:0;
background:transparent;
box-shadow:none;
}
.newcomer-guide .home-pulse-head > div {
min-width:0;
display:flex;
flex-direction:column;
gap:3px;
}
.newcomer-guide-list {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
gap:9px;
}
.newcomer-step {
min-width:0;
min-height:96px;
padding:11px 10px;
display:grid;
grid-template-columns:34px minmax(0,1fr);
align-items:center;
column-gap:9px;
row-gap:3px;
text-align:left;
color:var(--text);
border:1px solid color-mix(in srgb,var(--line-soft) 82%,transparent);
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--panel) 42%,transparent);
box-shadow:none;
}
.newcomer-step span {
grid-row:1 / span 2;
width:34px;
height:34px;
display:grid;
place-items:center;
border-radius:14px;
color:var(--on-accent);
background:color-mix(in srgb,var(--accent2) 70%,var(--section-tint));
font-weight:950;
}
.newcomer-step strong {
min-width:0;
color:var(--text);
font-size:13px;
line-height:1.25;
}
.newcomer-step em {
min-width:0;
color:var(--muted);
font-size:11.5px;
font-style:normal;
line-height:1.35;
}
.newcomer-step.active {
border-color:color-mix(in srgb,var(--gold) 50%,var(--line));
background:color-mix(in srgb,var(--gold) 8%,var(--card));
}
.newcomer-step.done span {
color:#fff;
background:var(--ok);
}
.newcomer-step.future {
opacity:.66;
}
.newcomer-step:hover:not(:disabled) {
filter:none;
border-color:color-mix(in srgb,var(--section-tint) 42%,var(--line));
box-shadow:0 10px 26px color-mix(in srgb,var(--section-tint) 10%,rgba(0,0,0,.12));
}
.weekly-event-hub {
position:relative;
z-index:2;
margin:14px 0 16px;
padding:14px;
border:1px solid color-mix(in srgb,var(--section-tint) 16%,var(--line-soft));
border-radius:var(--radius-card);
background:var(--card);
box-shadow:0 16px 38px rgba(0,0,0,.13), inset 0 1px 0 rgba(255,255,255,.055);
}
.weekly-event-hub .home-pulse-head > div {
display:flex;
flex-direction:column;
gap:3px;
}
.weekly-event-body {
display:grid;
grid-template-columns:minmax(0,1.1fr) minmax(220px,.9fr);
gap:10px;
align-items:stretch;
}
.weekly-event-feature,
.weekly-challenge-card,
.weekly-reward-card,
.weekly-rank-row {
min-width:0;
border:1px solid color-mix(in srgb,var(--line-soft) 82%,transparent);
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--panel) 42%,transparent);
}
.weekly-event-feature {
min-height:116px;
padding:14px;
display:grid;
grid-template-columns:48px minmax(0,1fr);
gap:12px;
align-items:center;
}
.weekly-event-icon,
.weekly-reward-card span {
display:grid;
place-items:center;
border-radius:16px;
color:var(--on-accent);
background:color-mix(in srgb,var(--accent2) 70%,var(--section-tint));
font-weight:950;
}
.weekly-event-icon {
width:48px;
height:48px;
}
.weekly-event-feature strong {
display:block;
margin-bottom:4px;
color:var(--text);
font-size:18px;
}
.weekly-event-feature p {
margin:0;
line-height:1.45;
}
.weekly-event-rewards {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
.weekly-reward-card {
min-height:116px;
padding:12px;
display:grid;
grid-template-columns:34px minmax(0,1fr);
column-gap:10px;
row-gap:2px;
align-items:center;
text-align:left;
}
.weekly-reward-card span {
grid-row:1 / span 2;
width:34px;
height:34px;
}
.weekly-reward-card strong,
.weekly-rank-row strong,
.weekly-challenge-card strong {
min-width:0;
color:var(--text);
}
.weekly-reward-card em,
.weekly-rank-row em {
min-width:0;
color:var(--muted);
font-size:12px;
font-style:normal;
line-height:1.35;
}
.weekly-reward-card.claimed {
opacity:.72;
}
.weekly-challenge-card {
padding:12px;
display:flex;
justify-content:space-between;
gap:10px;
align-items:center;
}
.weekly-challenge-card div {
min-width:0;
display:flex;
flex-direction:column;
gap:4px;
}
.weekly-leaderboard {
display:grid;
gap:8px;
}
.weekly-rank-row {
min-height:44px;
padding:9px 10px;
display:grid;
grid-template-columns:42px minmax(0,1fr) auto;
gap:8px;
align-items:center;
}
.weekly-rank-row span {
color:var(--accent2);
font-weight:950;
}
.weekly-rank-row.mine {
border-color:color-mix(in srgb,var(--gold) 50%,var(--line));
background:color-mix(in srgb,var(--gold) 10%,var(--card));
}
.weekly-event-admin {
display:grid;
gap:12px;
}
.weekly-admin-summary {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}
.weekly-admin-summary span,
.weekly-admin-field {
min-width:0;
padding:10px;
border:1px solid color-mix(in srgb,var(--admin-line-soft) 82%,transparent);
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--admin-panel) 38%,transparent);
}
.weekly-admin-summary strong,
.weekly-admin-field > span {
display:block;
margin-bottom:5px;
color:var(--admin-accent);
font-size:12px;
font-weight:950;
}
.weekly-admin-summary em {
display:block;
min-width:0;
color:var(--admin-muted);
font-size:12px;
font-style:normal;
line-height:1.35;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.weekly-admin-form {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}
.weekly-admin-field input,
.weekly-admin-field select,
.weekly-admin-field textarea {
width:100%;
}
.weekly-admin-field textarea {
min-height:72px;
resize:vertical;
}
.weekly-admin-wide {
grid-column:span 3;
}
.weekly-admin-actions {
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
}
.weekly-admin-actions .msg {
margin:0;
}
.site-map-hub {
position:relative;
z-index:2;
margin:14px 0 16px;
padding:14px;
border:1px solid color-mix(in srgb,var(--section-tint) 16%,var(--line-soft));
border-radius:var(--radius-card);
background:var(--card);
box-shadow:0 16px 38px rgba(0,0,0,.13), inset 0 1px 0 rgba(255,255,255,.055);
}
.site-map-hub .home-pulse-head > div {
display:flex;
flex-direction:column;
gap:3px;
}
.site-map-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}
.site-map-panel {
min-width:0;
display:flex;
flex-direction:column;
gap:8px;
padding:10px;
border:1px solid color-mix(in srgb,var(--line-soft) 82%,transparent);
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--panel) 36%,transparent);
}
.site-map-label {
color:var(--accent2);
font-size:12px;
font-weight:950;
letter-spacing:.12em;
}
.site-map-list {
display:grid;
gap:8px;
}
.site-map-row {
min-width:0;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:8px;
align-items:stretch;
}
.site-map-row.hot .site-map-action {
border-color:color-mix(in srgb,var(--gold) 44%,var(--line));
background:color-mix(in srgb,var(--gold) 9%,var(--card));
}
.site-map-action {
min-width:0;
min-height:64px;
padding:10px;
display:grid;
grid-template-columns:32px minmax(0,1fr);
align-items:center;
column-gap:9px;
row-gap:1px;
color:var(--text);
text-align:left;
border:1px solid color-mix(in srgb,var(--line-soft) 82%,transparent);
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--card) 76%,transparent);
box-shadow:none;
}
.site-map-action span {
grid-row:1 / span 2;
width:32px;
height:32px;
display:grid;
place-items:center;
border-radius:12px;
color:var(--on-accent);
background:color-mix(in srgb,var(--accent2) 70%,var(--section-tint));
font-size:12px;
font-weight:950;
}
.site-map-action strong {
min-width:0;
color:var(--text);
font-size:13px;
line-height:1.25;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.site-map-action em {
min-width:0;
color:var(--muted);
font-size:12px;
font-style:normal;
line-height:1.35;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.site-map-action:hover:not(:disabled) {
filter:none;
border-color:color-mix(in srgb,var(--section-tint) 42%,var(--line));
box-shadow:0 10px 26px color-mix(in srgb,var(--section-tint) 10%,rgba(0,0,0,.12));
}
.site-map-favorite {
min-width:72px;
align-self:stretch;
}
.site-map-favorite[aria-pressed='true'] {
color:var(--gold);
border-color:color-mix(in srgb,var(--gold) 52%,var(--line));
}
@keyframes home-more-in {
from { opacity:.01; transform:translateY(-6px); }
to { opacity:1; transform:none; }
}
@media (min-width:980px) {
.home-card {
display:grid;
grid-template-columns:minmax(0,1fr) 320px;
gap:14px;
}
.home-top,
.changelog-panel,
.home-tools,
.home-planet-grid,
.home-more-toggle,
.home-more-panel,
.pet-home-status,
.home-pulse,
.newcomer-guide,
.notification-center,
.weekly-event-hub,
.site-map-hub,
.announce-block,
#homeMsg {
grid-column:1 / -1;
}
.today-hub,
.home-jiji-guide {
align-self:stretch;
}
}
@media (max-width:900px) {
.home-zone-card,
.home-zone-card:nth-child(1),
.home-zone-card:nth-child(2) {
grid-column:span 6;
}
}
@media (max-width:620px) {
.home-planet-grid {
grid-template-columns:1fr;
gap:11px;
}
.home-zone-card,
.home-zone-card:nth-child(1),
.home-zone-card:nth-child(2) {
grid-column:auto;
min-height:0;
border-radius:var(--radius-card);
padding:12px;
}
.home-zone-main {
min-height:96px;
border-radius:var(--radius-card);
}
.home-zone-main strong {
font-size:23px;
}
.home-zone-actions {
grid-template-columns:repeat(3,minmax(0,1fr));
}
.home-zone-actions button {
min-height:44px;
padding:0 8px;
font-size:11px;
}
.notification-center,
.weekly-event-hub,
.site-map-hub {
padding:12px;
border-radius:var(--radius-card);
}
.newcomer-guide,
.home-pulse {
padding:12px 0 0;
}
.home-pulse-list,
.notification-list,
.newcomer-guide-list,
.weekly-event-body,
.weekly-event-rewards,
.site-map-grid {
grid-template-columns:1fr;
gap:8px;
}
.site-map-row {
grid-template-columns:1fr;
}
.site-map-favorite {
width:100%;
min-height:44px;
}
.home-pulse-head {
flex-direction:column;
align-items:flex-start;
gap:2px;
}
.newcomer-step {
min-height:76px;
}
.weekly-admin-summary,
.weekly-admin-form {
grid-template-columns:1fr;
}
.weekly-admin-wide {
grid-column:auto;
}
.weekly-admin-actions {
align-items:stretch;
flex-direction:column;
}
.weekly-admin-actions button {
width:100%;
}
}
/* ===== v2026.08.23-admin-workbench：后台四区工作台 ===== */
.admin-work-tabs {
grid-column:1 / -1;
position:sticky;
top:0;
z-index:8;
display:flex;
flex-wrap:wrap;
gap:8px;
padding:8px;
border:1px solid color-mix(in srgb,var(--admin-accent) 18%,var(--admin-line-soft));
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--admin-card) 78%,transparent);
box-shadow:0 12px 28px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.05);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
}
.admin-work-tab {
flex:1 1 92px;
min-height:44px;
border-radius:var(--radius-chip);
color:var(--admin-muted);
border:1px solid transparent;
background:transparent;
box-shadow:none;
}
/* playful 变体下 4 条 button:not(:is(.ghost,.tab,...)) 规则（特异性 0,2,2）会命中这些
后台按钮并涂上 --accent（前台橙红 #ee6258），因为 .admin-work-tab.active（0,2,0）
特异性不够压不过去。手动覆盖，把后台这几个类从"普通按钮"里拉出来。 */
html[data-ui-variant="playful"] .admin-work-tab:not(.active),
html[data-ui-variant="playful"] .admin-workflow-card:not(.active):not(.warn),
html[data-ui-variant="playful"] .admin-ops-metric:not(.warn),
html[data-ui-variant="playful"] .admin-stat-card:not(.warn) {
background:var(--admin-card);
color:var(--admin-muted);
border-color:var(--admin-line-soft);
box-shadow:none;
}
/* tab 是小元素，实心蓝合理（与原设计 .admin-work-tab.active 一致） */
html[data-ui-variant="playful"] .admin-work-tab.active {
background:var(--admin-accent);
color:var(--on-accent);
border-color:var(--admin-accent);
box-shadow:none;
}
/* 工作区卡片与操作台指标：active 不做任何着色区分，与默认卡片完全一致
（和「数据看板」等未选中卡片一个样）。当前工作区由顶部 tab 的实心蓝指示，
卡片本身再染色会显得「常驻蓝色」。2026-09-12 用户要求。 */
html[data-ui-variant="playful"] .admin-workflow-card.active,
html[data-ui-variant="playful"] .admin-ops-metric.active {
background:var(--admin-card);
border-color:var(--admin-line-soft);
color:var(--admin-text);
box-shadow:none;
}
html[data-ui-variant="playful"] .admin-workflow-card.warn,
html[data-ui-variant="playful"] .admin-ops-metric.warn,
html[data-ui-variant="playful"] .admin-stat-card.warn {
background:var(--admin-warn);
border-color:color-mix(in srgb,var(--admin-warn) 52%,var(--admin-line));
color:var(--on-accent);
box-shadow:none;
}
/* hover 状态：button:not(:is(.ghost,.tab,...)):hover 会涂 --accent 渐变（橙红），
需要把后台这些类从「普通按钮 hover」里也拉出来。 */
/* 默认与 active 的卡片/指标，hover 完全一致（微偏蓝的灰）——active 不特殊对待 */
html[data-ui-variant="playful"] .admin-workflow-card:not(.warn):hover:not(:disabled),
html[data-ui-variant="playful"] .admin-ops-metric:not(.warn):hover:not(:disabled),
html[data-ui-variant="playful"] .admin-stat-card:not(.warn):hover:not(:disabled) {
background:color-mix(in srgb,var(--admin-card) 88%,var(--admin-accent));
color:var(--admin-text);
border-color:var(--admin-line);
box-shadow:none;
transform:none;
}
html[data-ui-variant="playful"] .admin-work-tab:not(.active):hover:not(:disabled) {
background:color-mix(in srgb,var(--admin-card) 88%,var(--admin-accent));
color:var(--admin-text);
border-color:var(--admin-line);
box-shadow:none;
transform:none;
}
/* tab active 保持实心蓝；warn 卡片 hover 稍暗 */
html[data-ui-variant="playful"] .admin-work-tab.active:hover:not(:disabled) {
background:var(--admin-accent);
color:var(--on-accent);
border-color:var(--admin-accent);
box-shadow:none;
transform:none;
filter:none;
}
html[data-ui-variant="playful"] .admin-workflow-card.warn:hover:not(:disabled),
html[data-ui-variant="playful"] .admin-ops-metric.warn:hover:not(:disabled),
html[data-ui-variant="playful"] .admin-stat-card.warn:hover:not(:disabled) {
background:color-mix(in srgb,var(--admin-warn) 88%,var(--admin-bg));
color:var(--on-accent);
border-color:transparent;
box-shadow:none;
transform:none;
filter:none;
}
.admin-work-tab:hover:not(:disabled) {
filter:none;
color:var(--admin-text);
border-color:color-mix(in srgb,var(--admin-accent) 28%,var(--admin-line));
}
.admin-work-tab.active {
color:var(--on-accent);
background:var(--admin-accent);
box-shadow:0 10px 24px color-mix(in srgb,var(--admin-accent) 18%,transparent);
}
.admin-top-actions {
grid-column:1 / -1;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:10px 12px;
border:1px solid color-mix(in srgb,var(--admin-accent) 14%,var(--admin-line-soft));
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--admin-card) 56%,transparent);
}
.admin-workflow-overview {
grid-column:1 / -1;
display:grid;
gap:10px;
padding:12px;
border:1px solid color-mix(in srgb,var(--admin-accent) 16%,var(--admin-line-soft));
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--admin-card) 50%,transparent);
}
.admin-workflow-head {
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:10px;
}
.admin-workflow-head strong {
color:var(--admin-text);
font-size:15px;
}
.admin-workflow-grid {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:8px;
}
.admin-workflow-card {
min-height:88px;
padding:10px;
display:grid;
gap:4px;
align-content:start;
text-align:left;
border:1px solid var(--admin-line-soft);
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--admin-bg) 66%,transparent);
color:var(--admin-text);
box-shadow:none;
}
.admin-workflow-card.active {
border-color:color-mix(in srgb,var(--admin-accent) 42%,var(--admin-line));
background:color-mix(in srgb,var(--admin-accent) 9%,var(--admin-panel));
}
.admin-workflow-card span {
color:var(--admin-muted);
font-size:12px;
}
.admin-workflow-card strong {
color:var(--admin-accent);
font-size:14px;
}
.admin-workflow-card.ok strong { color:var(--admin-ok); }
.admin-workflow-card.warn strong { color:var(--admin-warn); }
.admin-workflow-card.danger strong { color:color-mix(in srgb,var(--admin-danger) 86%,var(--admin-text)); }
.admin-workflow-card em {
color:var(--admin-muted);
font-size:11px;
font-style:normal;
line-height:1.35;
}
.admin-area-loading,
.admin-area-error {
grid-column:1 / -1;
}
.admin-confirm-overlay {
position:fixed;
inset:0;
z-index:60;
display:grid;
place-items:center;
padding:18px;
background:rgba(0,0,0,.48);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}
.admin-confirm-dialog {
width:min(520px,100%);
max-height:min(720px,calc(100dvh - 36px));
overflow:auto;
display:grid;
gap:12px;
padding:18px;
border:1px solid color-mix(in srgb,var(--admin-danger) 32%,var(--admin-line));
border-radius:var(--radius-card);
background:var(--admin-panel);
box-shadow:0 28px 80px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.06);
}
.admin-confirm-dialog > strong {
color:var(--admin-text);
font-size:18px;
}
.admin-confirm-message {
margin:0;
color:var(--admin-text);
line-height:1.5;
}
.admin-confirm-details {
display:grid;
gap:6px;
}
.admin-confirm-details span {
padding:8px 10px;
border:1px solid var(--admin-line-soft);
border-radius:var(--radius-control);
color:var(--admin-muted);
background:color-mix(in srgb,var(--admin-bg) 66%,transparent);
line-height:1.4;
}
.admin-confirm-input {
display:grid;
gap:6px;
color:var(--admin-muted);
font-size:12px;
font-weight:800;
}
.admin-confirm-input input {
min-height:44px;
}
.admin-confirm-actions {
display:flex;
justify-content:flex-end;
gap:8px;
flex-wrap:wrap;
}
.admin-confirm-actions button {
min-width:108px;
}
.admin-ops-console {
grid-column:1 / -1;
display:grid;
gap:10px;
padding:12px;
border:1px solid color-mix(in srgb,var(--admin-accent) 22%,var(--admin-line-soft));
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--admin-panel) 72%,transparent);
box-shadow:0 14px 32px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.04);
}
.admin-ops-head {
display:grid;
grid-template-columns:minmax(0,1fr) minmax(260px,380px);
gap:12px;
align-items:end;
}
.admin-ops-head strong {
display:block;
color:var(--admin-text);
font-size:16px;
}
.admin-search-box {
display:grid;
gap:5px;
color:var(--admin-muted);
font-size:12px;
font-weight:800;
}
.admin-search-box input {
min-height:44px;
}
.admin-ops-metrics {
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:8px;
}
.admin-ops-metric {
min-height:86px;
padding:10px;
display:grid;
gap:3px;
align-content:center;
text-align:left;
border:1px solid var(--admin-line-soft);
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--admin-bg) 72%,transparent);
color:var(--admin-text);
box-shadow:none;
}
.admin-ops-metric:hover:not(:disabled),
.admin-search-result:hover:not(:disabled) {
filter:none;
transform:translateY(-1px);
border-color:color-mix(in srgb,var(--admin-accent) 36%,var(--admin-line));
background:color-mix(in srgb,var(--admin-card) 72%,transparent);
}
.admin-ops-metric span {
color:var(--admin-muted);
font-size:12px;
}
.admin-ops-metric strong {
color:var(--admin-accent);
font-size:25px;
line-height:1;
font-variant-numeric:tabular-nums;
}
.admin-ops-metric em {
color:var(--admin-muted);
font-size:11px;
font-style:normal;
line-height:1.35;
}
.admin-ops-metric.ok strong { color:var(--admin-ok); }
.admin-ops-metric.warn strong { color:var(--admin-warn); }
.admin-ops-metric.danger strong { color:color-mix(in srgb,var(--admin-danger) 88%,var(--admin-text)); }
.admin-search-results {
display:grid;
gap:7px;
}
.admin-search-result {
width:100%;
min-height:58px;
padding:9px 10px;
display:grid;
grid-template-columns:74px minmax(0,.72fr) minmax(0,1fr);
gap:10px;
align-items:center;
text-align:left;
border:1px solid var(--admin-line-soft);
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--admin-bg) 72%,transparent);
color:var(--admin-text);
box-shadow:none;
}
.admin-search-result span {
color:var(--admin-warn);
font-size:12px;
font-weight:900;
}
.admin-search-result strong {
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.admin-search-result em {
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:var(--admin-muted);
font-size:12px;
font-style:normal;
}
.admin-area-hidden {
display:none !important;
}
.admin-jump-flash {
animation:admin-jump-flash 1.05s ease;
}
@keyframes admin-jump-flash {
0% { box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 0%,transparent),0 12px 28px rgba(0,0,0,.16); border-color:var(--gold); }
38% { box-shadow:0 0 0 6px color-mix(in srgb,var(--gold) 18%,transparent),0 18px 36px rgba(0,0,0,.22); border-color:var(--gold); }
100% { box-shadow:0 12px 28px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.04); }
}
.admin-quick-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
}
.admin-quick-grid button {
min-height:44px;
white-space:normal;
}
.admin-content-ops {
display:grid;
gap:12px;
}
.admin-content-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:8px;
}
.admin-content-card {
display:grid;
gap:4px;
min-height:92px;
padding:12px;
text-align:left;
border:1px solid var(--admin-line-soft);
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--admin-panel) 52%,transparent);
color:var(--admin-text);
box-shadow:none;
}
.admin-content-card span,
.admin-content-card em {
min-width:0;
color:var(--admin-muted);
font-size:12px;
font-style:normal;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.admin-content-card strong {
color:var(--admin-warn);
font-size:24px;
line-height:1;
}
.admin-content-actions {
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
}
.content-queue-list {
display:grid;
gap:8px;
}
.content-queue-head {
display:flex;
justify-content:space-between;
gap:10px;
align-items:center;
color:var(--muted);
font-size:12px;
}
.content-queue-head strong {
color:var(--text);
font-size:13px;
}
.content-queue-item {
border-color:color-mix(in srgb,var(--gold) 22%,var(--line));
}
.admin-user-toolbar {
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
margin:0 0 12px;
flex-wrap:wrap;
}
.admin-list-toolbar {
display:grid;
grid-template-columns:minmax(180px,1fr) 140px 140px 160px auto;
gap:8px;
align-items:stretch;
margin:0 0 8px;
}
.admin-list-toolbar-compact {
grid-template-columns:minmax(180px,1fr) minmax(150px,190px) auto;
}
.admin-list-toolbar input,
.admin-list-toolbar select {
min-height:44px;
}
.admin-bulk-bar {
display:flex;
align-items:center;
justify-content:flex-end;
gap:8px;
flex-wrap:wrap;
margin:0 0 12px;
padding:8px;
border:1px solid var(--admin-line-soft);
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--admin-bg) 62%,transparent);
}
.admin-bulk-bar span {
margin-right:auto;
font-variant-numeric:tabular-nums;
}
.admin-review-reason-row {
display:grid;
grid-template-columns:minmax(150px,190px) minmax(180px,1fr);
gap:8px;
margin:0 0 10px;
}
.admin-review-field {
display:grid;
gap:5px;
color:var(--admin-muted);
font-size:12px;
font-weight:800;
}
.admin-review-field input,
.admin-review-field select {
min-height:44px;
}
.admin-review-guide {
display:grid;
gap:8px;
margin:0 0 12px;
padding:10px;
border:1px solid color-mix(in srgb,var(--admin-warn) 24%,var(--admin-line-soft));
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--admin-warn) 7%,var(--admin-panel));
}
.admin-review-guide-head {
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:10px;
}
.admin-review-guide-head > div {
display:grid;
gap:3px;
min-width:0;
}
.admin-review-guide-head strong {
color:var(--admin-text);
font-size:14px;
}
.admin-review-guide-head > span {
flex:0 1 46%;
color:color-mix(in srgb,var(--admin-warn) 82%,var(--admin-text));
font-size:12px;
font-weight:900;
line-height:1.35;
text-align:right;
overflow-wrap:anywhere;
}
.admin-review-guide-grid,
.admin-review-detail-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
}
.admin-review-guide-grid span,
.admin-review-detail-grid span {
display:grid;
gap:3px;
min-width:0;
padding:8px 9px;
border:1px solid var(--admin-line-soft);
border-radius:14px;
background:color-mix(in srgb,var(--admin-bg) 64%,transparent);
}
.admin-review-guide-grid strong,
.admin-review-detail-grid strong {
color:var(--admin-muted);
font-size:12px;
}
.admin-review-guide-grid em,
.admin-review-detail-grid em {
color:var(--admin-text);
font-size:12px;
font-style:normal;
font-weight:800;
line-height:1.35;
overflow-wrap:anywhere;
}
.admin-review-flow {
color:color-mix(in srgb,var(--admin-warn) 82%,var(--admin-text));
font-size:12px;
font-weight:800;
line-height:1.35;
}
.admin-review-detail {
margin-top:4px;
}
.admin-review-detail summary {
min-height:44px;
display:flex;
align-items:center;
color:var(--admin-accent);
cursor:pointer;
font-size:12px;
font-weight:900;
}
.admin-user-edit-summary {
display:grid;
gap:8px;
margin:0 0 12px;
padding:12px;
border:1px solid color-mix(in srgb,var(--admin-accent) 28%,var(--admin-line-soft));
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--admin-panel) 56%,transparent);
}
.admin-user-edit-summary.dirty {
border-color:color-mix(in srgb,var(--admin-warn) 58%,var(--admin-line));
background:color-mix(in srgb,var(--admin-warn) 9%,var(--admin-panel));
}
.admin-user-edit-head {
display:flex;
justify-content:space-between;
gap:10px;
align-items:flex-start;
}
.admin-user-edit-head > div {
display:grid;
gap:3px;
min-width:0;
}
.admin-user-edit-head strong {
color:var(--admin-text);
font-size:14px;
}
.admin-user-edit-status {
flex:0 0 auto;
padding:5px 9px;
border:1px solid color-mix(in srgb,var(--admin-ok) 42%,var(--admin-line));
border-radius:var(--radius-chip);
color:var(--admin-ok);
font-size:12px;
font-weight:900;
line-height:1.2;
}
.admin-user-edit-status.disabled {
border-color:color-mix(in srgb,#ff5f6d 42%,var(--admin-line));
color:#ff5f6d;
}
.admin-user-edit-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
}
.admin-user-edit-grid span {
display:grid;
gap:3px;
min-width:0;
padding:9px 10px;
border:1px solid var(--admin-line-soft);
border-radius:14px;
background:color-mix(in srgb,var(--admin-bg) 64%,transparent);
}
.admin-user-edit-grid strong {
color:var(--admin-muted);
font-size:12px;
}
.admin-user-edit-grid em {
color:var(--admin-text);
font-size:12px;
font-style:normal;
font-weight:800;
line-height:1.35;
overflow-wrap:anywhere;
}
.admin-user-edit-actions {
display:flex;
gap:8px;
flex-wrap:wrap;
}
.admin-user-edit-actions button {
min-height:44px;
}
.admin-group-edit-summary {
display:grid;
gap:8px;
margin:0 0 12px;
padding:10px;
border:1px solid color-mix(in srgb,var(--admin-accent) 24%,var(--admin-line-soft));
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--admin-panel) 48%,transparent);
}
.admin-group-edit-head {
display:flex;
justify-content:space-between;
gap:10px;
align-items:flex-start;
}
.admin-group-edit-head > div {
display:grid;
gap:3px;
min-width:0;
}
.admin-group-edit-head strong { color:var(--admin-text); font-size:14px; }
.admin-group-edit-head > span {
flex:0 0 auto;
color:var(--admin-warn);
font-size:12px;
font-weight:900;
}
.admin-group-impact-grid {
display:grid;
grid-template-columns:1fr;
gap:8px;
}
.admin-group-impact-grid span {
display:grid;
gap:3px;
min-width:0;
padding:8px 9px;
border:1px solid var(--admin-line-soft);
border-radius:14px;
background:color-mix(in srgb,var(--admin-bg) 64%,transparent);
}
.admin-group-impact-grid strong { color:var(--admin-muted); font-size:12px; }
.admin-group-impact-grid em { color:var(--admin-text); font-size:12px; font-style:normal; font-weight:800; overflow-wrap:anywhere; }
.admin-group-edit-actions {
display:flex;
gap:8px;
flex-wrap:wrap;
}
.admin-group-edit-actions button { min-height:44px; }
.admin-group-form-actions {
display:grid;
grid-template-columns:minmax(160px,1fr) minmax(140px,auto);
}
.admin-group-form-actions .full { margin-top:0; }
.admin-user-edit-note {
margin:0;
color:var(--admin-warn);
font-size:12px;
font-weight:900;
}
.admin-user-form-actions {
display:grid;
grid-template-columns:minmax(180px,1fr) minmax(140px,auto);
}
.admin-user-form-actions .full {
margin-top:0;
}
.admin-selectable-row,
.admin-user-row {
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
}
.admin-selectable-row.selected,
.admin-user-row.selected {
border-color:color-mix(in srgb,var(--admin-warn) 52%,var(--admin-line));
background:color-mix(in srgb,var(--admin-warn) 8%,var(--admin-bg));
}
.admin-row-check {
width:32px;
min-height:44px;
display:grid;
place-items:center;
}
.admin-row-check input {
width:18px;
height:18px;
accent-color:var(--admin-accent);
}
.admin-handoff-hint {
color:color-mix(in srgb,var(--admin-warn) 82%,var(--admin-text));
font-size:12px;
font-weight:800;
line-height:1.35;
overflow-wrap:anywhere;
}
.admin-online-list {
margin:0 0 12px;
}
.admin-online-user {
border-color:color-mix(in srgb,var(--admin-ok) 22%,var(--admin-line-soft));
}
.admin-online-dot {
display:inline-block;
width:8px;
height:8px;
margin-right:7px;
border-radius:var(--radius-chip);
background:var(--admin-ok);
box-shadow:0 0 0 4px color-mix(in srgb,var(--admin-ok) 18%,transparent);
}
@media (max-width:620px) {
.admin-work-tabs {
top:0;
flex-wrap:nowrap;
overflow:auto;
scrollbar-width:none;
}
.admin-work-tabs::-webkit-scrollbar { display:none; }
.admin-work-tab {
flex:0 0 auto;
min-width:76px;
}
.admin-top-actions {
align-items:stretch;
flex-direction:column;
}
.admin-workflow-head {
flex-direction:column;
}
.admin-workflow-grid {
grid-template-columns:repeat(2,minmax(0,1fr));
}
.admin-ops-head,
.admin-search-result {
grid-template-columns:1fr;
}
.admin-ops-metrics {
grid-template-columns:repeat(2,minmax(0,1fr));
}
.admin-list-toolbar {
grid-template-columns:1fr;
}
.admin-review-reason-row,
.admin-review-guide-grid,
.admin-review-detail-grid {
grid-template-columns:1fr;
}
.admin-bulk-bar {
align-items:stretch;
flex-direction:column;
}
.admin-bulk-bar span {
margin-right:0;
}
.admin-bulk-bar button {
width:100%;
}
.admin-confirm-overlay {
padding:12px;
place-items:end center;
}
.admin-confirm-dialog {
max-height:calc(100dvh - 24px);
padding:14px;
}
.admin-confirm-actions {
display:grid;
grid-template-columns:1fr;
}
.admin-confirm-actions button {
width:100%;
}
.admin-user-edit-head {
flex-direction:column;
}
.admin-review-guide-head {
flex-direction:column;
}
.admin-review-guide-head > span {
flex:auto;
text-align:left;
}
.admin-user-edit-grid,
.admin-user-form-actions,
.admin-group-form-actions {
grid-template-columns:1fr;
}
.admin-user-edit-actions button,
.admin-group-edit-actions button {
flex:1 1 150px;
}
.admin-group-edit-head { flex-direction:column; }
.admin-selectable-row,
.admin-user-row {
grid-template-columns:auto minmax(0,1fr);
}
.admin-selectable-row .row-item-actions,
.admin-user-row .row-item-actions {
grid-column:1 / -1;
justify-content:flex-end;
}
.admin-search-result strong,
.admin-search-result em {
white-space:normal;
}
.admin-quick-grid {
grid-template-columns:1fr;
}
}
/* ===== v2026.08.23-game-hub：游戏厅分类页 ===== */
.game-hub-card {
overflow:hidden;
}
.game-hub-body {
display:flex;
flex-direction:column;
gap:18px;
background:transparent;
}
.game-hub-section {
padding:14px;
border:1px solid color-mix(in srgb,var(--section-tint) 18%,var(--line-soft));
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--card) 86%,transparent);
box-shadow:0 14px 34px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.05);
}
.game-hub-section .tile-group-title {
margin:0 0 10px;
}
.game-hub-grid {
grid-template-columns:repeat(2,minmax(0,1fr));
}
.game-hub-grid .tile {
min-height:132px;
}
.game-shortcut-list {
grid-template-columns:1fr;
}
.game-shortcut-row {
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:8px;
align-items:stretch;
}
.game-shortcut-row .tile {
min-height:92px;
}
.game-favorite-toggle {
align-self:stretch;
min-width:72px;
}
.game-favorite-toggle[aria-pressed='true'] {
border-color:color-mix(in srgb,var(--gold) 52%,var(--line));
color:var(--gold);
}
#gameHubGomokuBtn::before { content:'⚫'; }
#gameHubDrawBtn::before { content:'🎨'; }
#gameHubSnakeBtn::before,
#gameHubSnakeRankBtn::before { content:'🐍'; }
#gameHubCookieBtn::before,
.game-recent[data-game-recent='cookie']::before,
.game-recent[data-game-favorite='cookie']::before { content:'🍪'; }
#gameHubTankBtn::before { content:'🛡️'; }
#gameHubPokerBtn::before,
.game-recent[data-game-recent='poker']::before,
.game-recent[data-game-favorite='poker']::before { content:'🃏'; }
#gameHubBreadBtn::before,
.game-recent[data-game-recent='bread']::before,
.game-recent[data-game-favorite='bread']::before { content:'🥖'; }
#gameHubMazeBtn::before,
.game-recent[data-game-recent='maze']::before,
.game-recent[data-game-favorite='maze']::before { content:'🧩'; }
#gameHubBreakoutBtn::before,
.game-recent[data-game-recent='breakout']::before,
.game-recent[data-game-favorite='breakout']::before { content:'🧱'; }
#gameHubDrawRankBtn::before { content:'🏆'; }
.game-save-section { display:grid; gap:10px; }
.game-save-center { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.game-save-item { display:flex; gap:10px; align-items:flex-start; min-width:0; padding:11px 12px; border:1px solid var(--line-soft); border-radius:18px; background:color-mix(in srgb,var(--panel) 48%,transparent); }
.game-save-icon { flex:0 0 34px; width:34px; height:34px; display:grid; place-items:center; border-radius:14px; background:color-mix(in srgb,var(--section-tint) 16%,transparent); font-weight:900; }
.game-save-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.game-save-item .game-favorite-toggle { flex:0 0 auto; min-width:64px; }
.game-save-main strong { color:var(--text); font-size:13px; }
.game-save-main span { color:var(--text); font-size:12px; line-height:1.4; overflow-wrap:anywhere; }
.game-save-main em { color:var(--muted); font-style:normal; font-size:11px; line-height:1.35; }
.game-save-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.game-save-file-label { display:flex; align-items:center; gap:7px; min-height:34px; padding:7px 10px; border:1px solid var(--line-soft); border-radius:var(--radius-pill); color:var(--text); background:color-mix(in srgb,var(--panel) 52%,transparent); font-size:12px; font-weight:800; }
.game-save-file-label input { max-width:188px; color:var(--muted); font-size:11px; }
.game-save-import-preview { display:grid; gap:6px; padding:10px 12px; border:1px dashed color-mix(in srgb,var(--gold) 42%,var(--line)); border-radius:var(--radius-card); background:color-mix(in srgb,var(--panel) 44%,transparent); }
.game-save-import-preview strong { color:var(--text); font-size:13px; }
.game-save-import-preview span { color:var(--muted); font-size:12px; line-height:1.45; }
.game-save-import-preview ul { margin:0; padding-left:18px; color:var(--text); font-size:12px; line-height:1.45; columns:2; }
#gameSaveMsg { margin:0; }
.poker-ladder-card,
.embedded-game-card {
overflow:hidden;
background:var(--card);
}
.poker-ladder-top,
.embedded-game-top {
align-items:center;
background:color-mix(in srgb,var(--panel) 78%,transparent);
}
.embedded-game-actions {
display:flex;
align-items:center;
justify-content:flex-end;
gap:8px;
flex-wrap:wrap;
}
.poker-ladder-shell,
.embedded-game-shell {
position:relative;
margin:14px;
min-height:min(720px, calc(100svh - 186px));
border:1px solid color-mix(in srgb,var(--gold) 34%,var(--line));
border-radius:var(--radius-card);
overflow:hidden;
background:#080a12;
box-shadow:0 22px 50px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06);
}
.poker-ladder-shell::before,
.embedded-game-shell::before {
content:'🎮 游戏加载中';
position:absolute;
z-index:0;
inset:0;
display:grid;
place-items:center;
color:color-mix(in srgb,var(--gold) 64%,white);
font-weight:900;
letter-spacing:.08em;
opacity:.32;
}
.poker-ladder-shell iframe,
.embedded-game-shell iframe {
position:relative;
z-index:1;
display:block;
width:100%;
height:min(720px, calc(100svh - 186px));
min-height:560px;
border:0;
background:#080a12;
}
.poker-ladder-note,
.embedded-game-note { margin:0 16px 16px; text-align:center; }
.poker-ladder-card:fullscreen,
.embedded-game-card:fullscreen,
.poker-ladder-card:-webkit-full-screen,
.embedded-game-card:-webkit-full-screen {
width:100vw;
height:100dvh;
max-width:none;
border:0;
border-radius:0;
display:flex;
flex-direction:column;
background:var(--bg);
}
.poker-ladder-card:fullscreen .poker-ladder-shell,
.poker-ladder-card:-webkit-full-screen .poker-ladder-shell,
.embedded-game-card:fullscreen .embedded-game-shell,
.embedded-game-card:-webkit-full-screen .embedded-game-shell,
.embedded-game-card:fullscreen .embedded-widget-shell,
.embedded-game-card:-webkit-full-screen .embedded-widget-shell {
flex:1 1 auto;
margin:10px;
min-height:0;
}
.poker-ladder-card:fullscreen iframe,
.poker-ladder-card:-webkit-full-screen iframe,
.embedded-game-card:fullscreen iframe,
.embedded-game-card:-webkit-full-screen iframe {
height:100%;
min-height:0;
}
.poker-ladder-card:fullscreen .poker-ladder-note,
.poker-ladder-card:-webkit-full-screen .poker-ladder-note,
.embedded-game-card:fullscreen .embedded-game-note,
.embedded-game-card:-webkit-full-screen .embedded-game-note {
display:none;
}
@media (max-width:720px) {
.poker-ladder-top,
.embedded-game-top {
align-items:stretch;
flex-wrap:wrap;
}
.poker-ladder-top .chat-meta,
.embedded-game-top .chat-meta {
align-items:flex-start;
order:3;
flex:1 0 100%;
}
.embedded-game-actions {
margin-left:auto;
}
.poker-ladder-shell,
.embedded-game-shell {
margin:10px;
border-radius:18px;
min-height:calc(100svh - 172px);
}
.poker-ladder-shell iframe,
.embedded-game-shell iframe {
height:calc(100svh - 172px);
min-height:520px;
}
}
@media (prefers-reduced-motion:reduce) {
.poker-ladder-shell,
.poker-ladder-shell iframe { scroll-behavior:auto; }
}
/* ===== v2026.08.28-pet-town：叽叽的世界原生像素农场 ===== */
.pet-town-card {
display:grid;
grid-template-rows:auto minmax(0,1fr);
place-items:center stretch;
gap:10px;
padding:14px;
overflow:hidden;
background:var(--card);
}
.pet-town-page-bar {
width:min(100%, 1600px);
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
color:var(--muted);
font-size:13px;
font-weight:800;
}
.pet-town-page-bar button { min-height:44px; }
.pet-town-card:fullscreen,
.pet-town-card:-webkit-full-screen {
width:100vw;
height:100svh;
padding:0;
border:0;
border-radius:0;
background:#132018;
}
.pet-town-stage {
position:relative;
width:min(100%, 1600px, calc((100svh - 88px) * 16 / 9));
aspect-ratio:16 / 9;
min-width:0;
border:1px solid color-mix(in srgb,#74bd68 42%,var(--line));
border-radius:var(--radius-card);
overflow:hidden;
background:#20361e;
box-shadow:0 22px 48px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
}
.pet-town-onboarding { position:absolute; inset:0; z-index:12; display:grid; place-items:center; padding:24px; background:rgba(9,18,12,.62); backdrop-filter:blur(5px); }
.pet-town-onboarding.hidden { display:none; }
.pet-town-onboarding-card { width:min(520px,100%); max-height:calc(100% - 24px); overflow:auto; padding:26px; border:2px solid #e8c873; border-radius:var(--radius-card); background:#f5e5b7; color:#3b3025; box-shadow:0 18px 50px rgba(0,0,0,.4); }
.pet-town-onboarding-kicker { color:#8a5b38; font-size:12px; font-weight:900; letter-spacing:.08em; }
.pet-town-onboarding-card h2 { margin:8px 0 6px; font-size:25px; }
.pet-town-onboarding-card p { margin:6px 0 14px; line-height:1.5; }
.pet-town-onboarding-route { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin:10px 0 14px; }
.pet-town-onboarding-route span { min-width:0; display:flex; align-items:center; justify-content:center; gap:5px; padding:7px 6px; border:1px solid #d3ad6b; border-radius:8px; background:#fff5d2; font-size:12px; font-weight:900; text-align:center; }
.pet-town-onboarding-route b { width:20px; height:20px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:#4d8c57; color:#fff; font-size:11px; }
.pet-town-onboarding-card label { display:grid; gap:6px; font-weight:900; }
.pet-town-onboarding-card .pet-town-account-check { display:flex; grid-template-columns:none; align-items:center; gap:8px; margin:12px 0; font-size:12px; font-weight:800; }
.pet-town-account-check input { width:17px; min-height:17px; accent-color:#4d8c57; }
.pet-town-onboarding-card input { width:100%; min-height:44px; padding:8px 11px; border:2px solid #c29a61; border-radius:7px; background:#fff8df; color:#3b3025; font:inherit; }
.pet-town-onboarding-label { margin:16px 0 7px; font-weight:900; }
.pet-town-onboarding-options { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.pet-town-onboarding-option { min-height:68px; padding:8px; border:2px solid #caa56b; border-radius:8px; background:#fff4cf; color:#3b3025; font-weight:800; cursor:pointer; }
.pet-town-onboarding-option.active { border-color:#4d8c57; background:#d9efc5; box-shadow:0 0 0 2px #4d8c57 inset; }
.pet-town-onboarding-option small { display:block; margin-top:4px; font-size:10px; font-weight:600; }
.pet-town-outfit-preview { position:relative; display:block; width:28px; height:32px; margin:0 auto 4px; border:3px solid #5d3e2b; border-radius:8px 8px 5px 5px; background:var(--shirt,#4b8fca); box-shadow:inset 0 -13px 0 var(--pants,#375b7e), inset 0 3px 0 rgba(255,255,255,.28), inset 0 -4px 0 rgba(0,0,0,.18); }
.pet-town-outfit-preview::before { content:''; position:absolute; left:6px; top:-9px; width:10px; height:8px; border:3px solid #5d3e2b; border-bottom:0; border-radius:8px 8px 0 0; background:#f0c7a1; }
.pet-town-outfit-preview::after { content:''; position:absolute; left:4px; right:4px; bottom:-7px; height:5px; border-radius:0 0 4px 4px; background:#3f2d24; }
.outfit-denim { background:#375b7e; }.outfit-sunset { background:#d66d55; }
.pet-town-onboarding-confirm { width:100%; min-height:44px; margin-top:18px; border:0; border-radius:7px; background:#4d8c57; color:#fffaf2; font-weight:900; cursor:pointer; }
.pet-town-travel,.pet-town-story,.pet-town-shop,.pet-town-fishing,.pet-town-quickstart { display:flex; flex-direction:column; gap:7px; padding:9px; border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-card); background:rgba(255,255,255,.08); }
.pet-town-quickstart { border-color:rgba(255,229,138,.34); background:rgba(255,229,138,.12); }
.pet-town-quickstart strong { color:#fff3a8; }
.pet-town-quickstart span { color:#fff9df; font-size:12px; font-weight:850; line-height:1.35; }
.pet-town-travel > div,.pet-town-shop > div { display:flex; flex-wrap:wrap; gap:5px; }
.pet-town-travel button.active { color:#fffbe7; border-color:#ffe58a; background:rgba(255,229,138,.18); }
.pet-town-story span,.pet-town-fishing span { color:rgba(255,255,255,.74); font-size:11px; line-height:1.4; }
.pet-town-world-event,.pet-town-schedule { display:flex; flex-direction:column; gap:6px; padding:9px; border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-card); background:rgba(255,229,138,.08); }.pet-town-world-event span { color:#ffe9a6; font-size:11px; line-height:1.4; }.pet-town-schedule > div { display:grid; grid-template-columns:1fr 1fr; gap:5px; }.pet-town-schedule span { display:flex; flex-direction:column; gap:2px; padding:5px; border-radius:var(--radius-control); background:rgba(255,255,255,.08); }.pet-town-schedule b { color:#fffbe7; font-size:10px; }.pet-town-schedule small { color:rgba(255,255,255,.66); font-size:9px; }
.pet-town-tasks { display:flex; flex-direction:column; gap:7px; padding:9px; border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-card); background:rgba(255,255,255,.08); }
.pet-town-tasks > div { display:flex; flex-direction:column; gap:5px; }
.pet-town-task { display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:6px; align-items:center; padding:6px; border-radius:7px; background:rgba(255,255,255,.08); }
.pet-town-task.done { opacity:.55; }.pet-town-task > span { color:#ffe58a; font-size:9px; font-weight:900; }.pet-town-task b,.pet-town-task small { display:block; }.pet-town-task b { color:#fffbe7; font-size:11px; }.pet-town-task small { margin-top:2px; color:rgba(255,255,255,.68); font-size:10px; line-height:1.3; }
.pet-town-endings { display:flex; flex-direction:column; gap:7px; padding:9px; border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-card); background:rgba(255,255,255,.08); }
.pet-town-ending { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; align-items:center; padding:7px; border-radius:7px; background:rgba(255,255,255,.08); }.pet-town-ending.selected { border:1px solid #ffe58a; background:rgba(255,229,138,.12); }.pet-town-ending b,.pet-town-ending small { display:block; }.pet-town-ending b { color:#fffbe7; font-size:11px; }.pet-town-ending small { margin-top:2px; color:rgba(255,255,255,.68); font-size:10px; line-height:1.3; }
.pet-town-retention { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 9px; border:1px solid rgba(255,255,255,.16); border-radius:9px; background:rgba(255,229,138,.1); color:#ffe9a6; font-size:11px; font-weight:800; }
.pet-town-stage.pet-town-feedback-success { animation:pet-town-success .22s steps(2,end); }.pet-town-stage.pet-town-feedback-error { animation:pet-town-error .22s steps(2,end); }
@keyframes pet-town-success { 50% { box-shadow:0 0 0 3px rgba(255,229,138,.72),0 22px 48px rgba(0,0,0,.24); } }
@keyframes pet-town-error { 25%,75% { transform:translateX(-3px); } 50% { transform:translateX(3px); } }
@media (prefers-reduced-motion:reduce) { .pet-town-stage.pet-town-feedback-success,.pet-town-stage.pet-town-feedback-error { animation:none; } }
.pet-town-fish-book { display:flex; flex-direction:column; gap:7px; padding:9px; border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-card); background:rgba(255,255,255,.08); }.pet-town-fish-book > div { display:flex; gap:6px; }.pet-town-fish-entry { display:grid; place-items:center; width:34px; height:34px; border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-control); background:rgba(0,0,0,.18); color:rgba(255,255,255,.42); font-weight:900; }.pet-town-fish-entry.caught { border-color:#8ed6bb; background:rgba(142,214,187,.14); font-size:20px; }
.pet-town-relations { display:flex; flex-direction:column; gap:6px; padding:9px; border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-card); background:rgba(255,255,255,.08); }.pet-town-relation { display:grid; grid-template-columns:54px minmax(0,1fr) auto; gap:6px; align-items:center; color:#fffbe7; font-size:11px; }.pet-town-relation i { height:6px; overflow:hidden; border-radius:var(--radius-control); background:rgba(0,0,0,.25); }.pet-town-relation i b { display:block; height:100%; background:#f1b85a; }.pet-town-relation button { min-height:44px; padding:6px 10px; }
.pet-town-pet-event { display:flex; flex-direction:column; gap:5px; padding:9px; border:1px solid rgba(142,214,187,.24); border-radius:var(--radius-card); background:rgba(142,214,187,.1); }.pet-town-pet-event span { color:#c5f1df; font-size:11px; line-height:1.4; }
.pet-town-mine-info { display:flex; flex-direction:column; gap:5px; padding:9px; border:1px solid rgba(180,180,200,.2); border-radius:var(--radius-card); background:rgba(70,66,82,.25); }.pet-town-mine-info span { color:rgba(255,255,255,.7); font-size:11px; line-height:1.4; }
.pet-town-decor-list { display:flex; flex-direction:column; gap:6px; padding:9px; border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-card); background:rgba(255,255,255,.08); }.pet-town-decor-list > div { display:grid; gap:5px; }.pet-town-decor-list span { display:flex; align-items:center; justify-content:space-between; gap:8px; color:#fffbe7; font-size:11px; }.pet-town-decor-list small { color:rgba(255,255,255,.62); font-size:10px; }
.pet-town-farm-settings { display:flex; flex-direction:column; gap:6px; padding:9px; border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-card); background:rgba(255,255,255,.08); }.pet-town-farm-settings > div { display:flex; gap:6px; }.pet-town-farm-settings input { min-width:0; flex:1; padding:7px 8px; border:1px solid rgba(255,255,255,.24); border-radius:var(--radius-control); background:rgba(0,0,0,.2); color:#fffbe7; }
.pet-town-shop-item { display:grid; grid-template-columns:22px 1fr auto; gap:4px; align-items:center; min-width:0; padding:6px; border:1px solid rgba(255,255,255,.14); border-radius:7px; background:rgba(255,255,255,.08); color:#fffbe7; cursor:pointer; }
.pet-town-shop-item span { font-size:17px; }.pet-town-shop-item b { font-size:11px; text-align:left; }.pet-town-shop-item small { color:#ffe58a; font-size:10px; }
.pet-town-shop-item:disabled { cursor:not-allowed; opacity:.42; filter:grayscale(.5); }
@media (max-width:700px) { .pet-town-onboarding { padding:12px; }.pet-town-onboarding-card { padding:18px; }.pet-town-onboarding-options,.pet-town-onboarding-route { grid-template-columns:1fr 1fr; }.pet-town-onboarding-card h2 { font-size:20px; } }
.pet-town-stage:fullscreen,
.pet-town-stage:-webkit-full-screen,
.pet-town-card:fullscreen .pet-town-stage,
.pet-town-card:-webkit-full-screen .pet-town-stage {
width:100vw;
height:100svh;
aspect-ratio:auto;
border:0;
border-radius:0;
background:#132018;
}
#petTownCanvas {
display:block;
width:100%;
height:auto;
aspect-ratio:16 / 9;
image-rendering:pixelated;
image-rendering:crisp-edges;
background:#78b96a;
touch-action:none;
user-select:none;
transform:translateZ(0);
}
.pet-town-stage.pet-town-action-pending #petTownCanvas {
filter:saturate(1.05) brightness(1.035);
}
.pet-town-stage.pet-town-action-pending .pet-town-focus {
border-color:rgba(255,229,138,.5);
box-shadow:0 0 0 2px rgba(255,229,138,.14),0 14px 26px rgba(0,0,0,.2);
}
.pet-town-stage:fullscreen #petTownCanvas,
.pet-town-stage:-webkit-full-screen #petTownCanvas,
.pet-town-card:fullscreen #petTownCanvas,
.pet-town-card:-webkit-full-screen #petTownCanvas {
position:absolute;
inset:0;
width:min(100vw, calc(100svh * 16 / 9));
height:min(100svh, calc(100vw * 9 / 16));
margin:auto;
}
.pet-town-hud,
.pet-town-menu,
.pet-town-focus,
.pet-town-coach,
.pet-town-actions,
.pet-town-msg {
position:absolute;
z-index:4;
}
.pet-town-hud {
top:12px;
left:12px;
right:12px;
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
padding:8px 10px;
border:1px solid rgba(255,245,186,.24);
border-radius:12px;
background:rgba(19,31,22,.68);
color:#fff6d5;
font-size:17px;
font-weight:800;
line-height:1.1;
text-shadow:0 2px 0 rgba(0,0,0,.35);
backdrop-filter:blur(8px);
box-shadow:0 8px 20px rgba(0,0,0,.18), inset 0 0 0 2px rgba(255,255,255,.04);
}
.pet-town-stage:fullscreen .pet-town-hud,
.pet-town-stage:-webkit-full-screen .pet-town-hud,
.pet-town-card:fullscreen .pet-town-hud,
.pet-town-card:-webkit-full-screen .pet-town-hud {
top:max(12px, env(safe-area-inset-top));
left:max(12px, env(safe-area-inset-left));
right:max(12px, env(safe-area-inset-right));
padding:10px 12px;
font-size:clamp(16px, 1.12vw, 21px);
}
.pet-town-hud strong { display:inline-flex; align-items:center; gap:4px; min-width:0; margin-right:auto; font-size:21px; color:#fffbe7; }
#petTownStageTitle { max-width:24ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pet-town-hud b { font-size:21px; color:#fff3a8; }
.pet-town-hud button { min-height:44px; color:#fff6d5; border-color:rgba(255,255,255,.26); background:rgba(255,255,255,.08); }
.pet-town-hud button,
.pet-town-menu button,
.pet-town-touch button,
.pet-town-key-hint { touch-action:manipulation; user-select:none; -webkit-tap-highlight-color:transparent; }
.pet-town-hud #petTownWorldStatus { color:#bfe9d7; }
.pet-town-stage.panel-collapsed #petTownPanelToggleBtn {
border-color:#ffe58a;
color:#fffbe7;
background:rgba(255,229,138,.18);
}
.pet-town-focus {
left:14px;
bottom:116px;
max-width:min(560px, calc(100% - 392px));
display:grid;
grid-template-columns:auto minmax(0,1fr);
align-items:center;
gap:3px 8px;
padding:11px 13px;
border:1px solid rgba(255,229,138,.36);
border-radius:12px;
background:rgba(19,31,22,.78);
color:#fff9df;
font-size:15px;
font-weight:900;
line-height:1.35;
text-shadow:0 2px 0 rgba(0,0,0,.3);
backdrop-filter:blur(8px);
box-shadow:0 12px 26px rgba(0,0,0,.2), inset 0 0 0 2px rgba(255,255,255,.04);
}
.pet-town-focus::before {
content:none;
}
.pet-town-focus-badge {
display:inline-flex;
align-items:center;
justify-content:center;
min-width:42px;
padding:3px 7px;
border-radius:var(--radius-chip);
background:#ffe58a;
color:#21351f;
font-size:12px;
font-weight:1000;
line-height:1;
text-shadow:none;
}
.pet-town-focus-main,
.pet-town-focus-control {
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.pet-town-focus-main {
color:#fff9df;
}
.pet-town-focus-control {
grid-column:2;
color:#c5f1df;
font-size:12px;
font-weight:800;
opacity:.9;
}
.pet-town-coach {
top:68px;
left:14px;
display:inline-flex;
align-items:center;
gap:8px;
max-width:min(590px, calc(100% - 392px));
padding:7px 10px;
border:1px solid rgba(255,245,186,.22);
border-radius:var(--radius-chip);
background:rgba(19,31,22,.62);
color:#fff6d5;
font-size:12px;
font-weight:850;
line-height:1.1;
pointer-events:none;
text-shadow:0 2px 0 rgba(0,0,0,.35);
backdrop-filter:blur(8px);
box-shadow:0 10px 22px rgba(0,0,0,.18);
}
.pet-town-coach strong,
.pet-town-coach span {
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.pet-town-coach strong { color:#fff3a8; }
.pet-town-stage.panel-collapsed .pet-town-coach {
max-width:min(760px, calc(100% - 36px));
}
.pet-town-actions {
left:50%;
bottom:18px;
display:grid;
grid-template-columns:repeat(6,minmax(64px,1fr));
gap:7px;
width:min(520px, calc(100% - 392px));
transform:translateX(-50%);
}
.pet-town-actions button {
min-height:44px;
border-color:rgba(255,255,255,.18);
background:rgba(255,255,255,.88);
color:#20331f;
font-size:13px;
font-weight:900;
box-shadow:0 8px 18px rgba(0,0,0,.18);
}
.pet-town-key-hint { display:none; align-items:center; gap:5px; padding:4px 7px; border:1px solid rgba(255,229,138,.2); border-radius:7px; background:rgba(17,28,20,.58); color:#fffbe7; font-size:12px; font-weight:800; text-shadow:0 2px 0 rgba(0,0,0,.35); white-space:nowrap; box-shadow:0 6px 16px rgba(0,0,0,.14); }
.pet-town-key-hint kbd { min-width:22px; padding:3px 5px; border:1px solid rgba(255,255,255,.38); border-bottom-width:2px; border-radius:4px; background:rgba(17,28,20,.76); color:#fff3a8; text-align:center; font:800 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
@media (min-width: 769px) {
.pet-town-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 8px; width:min(920px, calc(100% - 36px)); pointer-events:none; }
.pet-town-actions button { display:none; }
.pet-town-key-hint { display:inline-flex; }
}
.pet-town-stage.desktop-input .pet-town-actions { display:flex; pointer-events:none; }
.pet-town-stage.desktop-input .pet-town-actions button { display:none; }
.pet-town-stage.desktop-input .pet-town-key-hint { display:inline-flex; }
.pet-town-menu {
top:66px;
right:12px;
bottom:64px;
width:min(342px, 35vw);
display:flex;
flex-direction:column;
gap:9px;
padding:10px;
overflow:auto;
border:2px solid rgba(255,229,138,.34);
border-radius:10px;
background:rgba(19,31,22,.92);
color:#fff8dc;
box-shadow:0 16px 42px rgba(0,0,0,.28), inset 0 0 0 3px rgba(255,255,255,.04), inset 0 -5px 0 rgba(0,0,0,.16);
backdrop-filter:blur(6px);
transition:transform .18s ease, opacity .18s ease;
}
.pet-town-stage:fullscreen .pet-town-menu,
.pet-town-stage:-webkit-full-screen .pet-town-menu,
.pet-town-card:fullscreen .pet-town-menu,
.pet-town-card:-webkit-full-screen .pet-town-menu {
top:72px;
right:max(12px, env(safe-area-inset-right));
bottom:max(64px, env(safe-area-inset-bottom));
width:min(380px, 28vw);
}
.pet-town-stage.panel-collapsed .pet-town-menu {
transform:translateX(calc(100% + 18px));
opacity:0;
pointer-events:none;
}
.pet-town-stage.panel-collapsed .pet-town-focus {
max-width:min(560px, calc(100% - 36px));
}
.pet-town-stage.panel-collapsed .pet-town-actions {
width:min(650px, calc(100% - 36px));
}
.pet-town-menu::-webkit-scrollbar { width:8px; }
.pet-town-menu::-webkit-scrollbar-thumb { background:rgba(255,255,255,.26); border-radius:var(--radius-chip); }
.pet-town-menu-tabs {
position:sticky;
top:0;
z-index:2;
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:5px;
padding:0 0 3px;
background:rgba(28,45,25,.94);
}
.pet-town-menu-tabs button {
min-width:0;
min-height:44px;
padding:5px 6px;
border:1px solid rgba(255,255,255,.16);
border-radius:6px;
background:rgba(255,255,255,.07);
color:rgba(255,248,220,.72);
font-size:12px;
font-weight:900;
cursor:pointer;
}
.pet-town-menu-tabs button.active {
border-color:#ffe58a;
background:rgba(255,229,138,.2);
color:#fffbe7;
}
.pet-town-menu > [data-pet-town-menu-section] { display:none; }
.pet-town-menu[data-menu-tab="play"] > [data-pet-town-menu-section="play"],
.pet-town-menu[data-menu-tab="town"] > [data-pet-town-menu-section="town"],
.pet-town-menu[data-menu-tab="role"] > [data-pet-town-menu-section="role"] { display:flex; }
.pet-town-menu[data-menu-tab="bag"] > [data-pet-town-menu-section="bag"] { display:flex; }
.pet-town-menu[data-menu-tab="bag"] > .pet-town-inventory { display:grid; }
.pet-town-menu[data-menu-tab="role"] > .pet-town-reset-button {
display:inline-flex;
align-items:center;
justify-content:center;
}
body.pet-town-playing .jiji-mascot { display:none; }
body.pet-town-playing .hero { display:none; }
body.pet-town-playing .app {
width:min(1640px,100%);
padding-top:14px;
}
body.pet-town-playing .pet-town-card:not(.hidden) {
min-height:calc(100svh - 28px);
place-items:start stretch;
}
.pet-town-touch {
position:absolute;
left:18px;
bottom:18px;
z-index:5;
display:none;
align-items:flex-end;
gap:14px;
opacity:.9;
pointer-events:none;
}
.pet-town-joystick,
.pet-town-use-button,
.pet-town-auto-button { pointer-events:auto; }
.pet-town-joystick {
position:relative;
width:108px;
height:108px;
border:2px solid rgba(255,255,255,.24);
border-radius:50%;
background:rgba(20,34,24,.72);
box-shadow:0 12px 28px rgba(0,0,0,.3), inset 0 0 0 12px rgba(255,255,255,.05);
touch-action:none;
}
.pet-town-joystick span {
position:absolute;
left:31px;
top:31px;
width:42px;
height:42px;
border-radius:50%;
background:#e6ad55;
box-shadow:0 8px 16px rgba(0,0,0,.28), inset 0 2px 0 rgba(255,255,255,.7);
transform:translate(var(--joy-x, 0px), var(--joy-y, 0px));
}
.pet-town-use-button,
.pet-town-auto-button {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:2px;
width:82px;
height:82px;
border:1px solid rgba(255,255,255,.28);
border-radius:50%;
color:#26391f;
font-size:18px;
font-weight:900;
line-height:1.05;
box-shadow:0 12px 24px rgba(0,0,0,.24);
}
.pet-town-use-button::after,
.pet-town-auto-button::after {
content:attr(data-cue);
max-width:88%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:10px;
font-weight:800;
opacity:.74;
}
.pet-town-use-button { background:rgba(255,240,172,.9); }
.pet-town-auto-button {
width:58px;
height:58px;
align-self:center;
background:rgba(201,238,183,.9);
font-size:14px;
}
.pet-town-use-button:active,
.pet-town-auto-button:active,
.pet-town-joystick:active {
transform:translateY(1px) scale(.96);
filter:brightness(1.08);
}
.pet-town-stage[data-pending-action] .pet-town-use-button,
.pet-town-stage[data-pending-action="autoTask"] .pet-town-auto-button {
box-shadow:0 0 0 3px rgba(255,229,138,.34),0 12px 24px rgba(0,0,0,.24);
filter:brightness(1.08);
}
.pet-town-bank,
.pet-town-guide,
.pet-town-pet,
.pet-town-orders,
.pet-town-wardrobe,
.pet-town-inventory-item {
border:1px solid rgba(255,255,255,.16);
border-radius:14px;
background:rgba(255,255,255,.1);
}
.pet-town-bank,
.pet-town-guide,
.pet-town-pet,
.pet-town-orders,
.pet-town-wardrobe {
display:flex;
flex-direction:column;
gap:6px;
padding:10px 11px;
}
.pet-town-bank strong,
.pet-town-guide strong,
.pet-town-pet strong,
.pet-town-orders strong,
.pet-town-wardrobe strong { color:#fffbe7; }
.pet-town-balance {
display:inline-flex;
align-items:baseline;
justify-content:space-between;
gap:8px;
color:#fff7cc;
font-weight:900;
}
.pet-town-balance b { color:#ffe58a; font-size:16px; }
.pet-town-bank span,
.pet-town-pet span,
.pet-town-inventory-item em,
.pet-town-order em {
color:rgba(255,255,255,.72);
font-style:normal;
font-size:11.5px;
line-height:1.35;
}
.pet-town-guide {
background:rgba(255,244,196,.14);
}
.pet-town-guide-head,
.pet-town-guide-actions {
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
}
.pet-town-guide-head span {
color:#ffe58a;
font-size:11px;
font-weight:900;
}
.pet-town-guide b {
color:#fffbe7;
font-size:13px;
line-height:1.25;
}
.pet-town-guide p,
.pet-town-guide em {
margin:0;
color:rgba(255,255,255,.76);
font-size:11.5px;
font-style:normal;
line-height:1.45;
}
.pet-town-guide em {
color:#ffe9a6;
font-weight:800;
}
.pet-town-guide-actions button {
min-height:28px;
color:#fff6d5;
border-color:rgba(255,255,255,.22);
background:rgba(255,255,255,.08);
}
.pet-town-pet button { align-self:flex-start; color:#fff6d5; border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.08); }
.pet-town-field {
display:flex;
align-items:center;
gap:8px;
color:rgba(255,255,255,.78);
font-size:12px;
font-weight:800;
}
.pet-town-field select { flex:1 1 auto; min-width:0; }
.pet-town-inventory {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:7px;
}
.pet-town-inventory-item {
display:grid;
grid-template-columns:28px minmax(0,1fr);
grid-template-areas:"icon name" "icon meta";
gap:2px 7px;
align-items:center;
padding:8px;
}
.pet-town-inventory-item span { grid-area:icon; font-size:21px; }
.pet-town-inventory-item strong { grid-area:name; color:#fffbe7; font-size:12px; }
.pet-town-inventory-item em { grid-area:meta; }
.pet-town-order-list,
.pet-town-style-grid {
display:grid;
gap:7px;
}
.pet-town-order {
display:grid;
grid-template-columns:24px minmax(0,1fr) auto;
gap:7px;
align-items:center;
padding:7px;
border-radius:12px;
background:rgba(255,255,255,.08);
}
.pet-town-order strong { display:block; color:#fffbe7; font-size:12px; line-height:1.25; }
.pet-town-order.done { opacity:.62; }
.pet-town-style-row {
display:grid;
gap:5px;
}
.pet-town-style-row > span {
color:rgba(255,255,255,.72);
font-size:11px;
font-weight:900;
}
.pet-town-style-row > div {
display:flex;
flex-wrap:wrap;
gap:5px;
}
.pet-town-style-row button {
display:inline-flex;
align-items:center;
gap:4px;
min-height:27px;
padding:4px 7px;
border:1px solid rgba(255,255,255,.14);
border-radius:10px;
background:rgba(255,255,255,.08);
color:#fff6d5;
font-size:11px;
font-weight:800;
}
.pet-town-style-row button.active {
border-color:#ffe58a;
background:rgba(255,229,138,.2);
color:#fffbe7;
}
.pet-town-style-row i {
width:12px;
height:12px;
border:1px solid rgba(255,255,255,.45);
border-radius:4px;
background:var(--swatch, #fff);
}
.pet-town-msg {
right:14px;
bottom:64px;
max-width:330px;
margin:0;
padding:8px 10px;
border:1px solid rgba(255,255,255,.16);
border-radius:13px;
background:rgba(17,28,20,.72);
color:#fff6d5;
font-size:13px;
font-weight:800;
backdrop-filter:blur(10px);
}
.pet-town-landscape-tip {
display:none;
position:absolute;
inset:0;
z-index:8;
place-items:center;
padding:24px;
background:rgba(13,22,16,.88);
color:#fff6d5;
font-size:18px;
font-weight:900;
text-align:center;
}
@media (min-width:1500px) and (hover:hover) and (pointer:fine) {
.pet-town-card {
padding:18px;
}
.pet-town-stage {
width:min(100%, 1760px, calc((100svh - 96px) * 16 / 9));
}
.pet-town-hud {
padding:11px 13px;
font-size:17px;
}
.pet-town-hud strong { font-size:22px; }
.pet-town-hud b { font-size:23px; }
.pet-town-menu {
width:min(380px, 30vw);
gap:10px;
padding:12px;
}
.pet-town-focus {
max-width:min(520px, calc(100% - 430px));
font-size:16px;
}
.pet-town-actions {
width:min(620px, calc(100% - 430px));
}
}
@media (hover:none), (max-width:960px) {
.pet-town-touch { display:flex; }
}
.pet-town-stage.mobile-input .pet-town-touch { display:flex; }
.pet-town-stage.desktop-input .pet-town-touch { display:none; }
@media (hover:hover) and (pointer:fine) {
#petTownCanvas { cursor:crosshair; }
.pet-town-touch { display:none; }
}
.pet-town-stage.mobile-input .pet-town-touch { display:flex; }
@media (max-width:960px) and (orientation:landscape) {
.pet-town-card:not(.hidden) {
position:fixed;
inset:0;
z-index:80;
padding:0;
border:0;
border-radius:0;
min-height:100dvh;
}
.pet-town-stage {
width:100vw;
height:100svh;
min-height:100dvh;
aspect-ratio:auto;
border:0;
border-radius:0;
}
.pet-town-page-bar { display:none; }
#petTownCanvas {
position:absolute;
inset:0;
width:100vw;
height:100svh;
object-fit:cover;
margin:auto;
}
.pet-town-onboarding { padding:8px; }
.pet-town-onboarding-card {
width:min(620px, calc(100vw - 24px));
max-height:calc(100dvh - 16px);
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
align-content:start;
gap:5px 10px;
padding:12px 14px;
border-radius:10px;
}
.pet-town-onboarding-kicker,
.pet-town-onboarding-card h2,
.pet-town-onboarding-card p,
.pet-town-onboarding-route,
.pet-town-onboarding-confirm,
.pet-town-onboarding-card #petTownOnboardingMsg { grid-column:1 / -1; }
.pet-town-onboarding-card .pet-town-account-check,
.pet-town-outfit-label,
.pet-town-outfit-options { grid-column:1; }
.pet-town-farm-name-label,
.pet-town-skill-label,
.pet-town-skill-options { grid-column:2; }
.pet-town-onboarding-kicker { font-size:10px; }
.pet-town-onboarding-card h2 { margin:3px 0 0; font-size:18px; }
.pet-town-onboarding-card p { margin:0 0 4px; font-size:12px; line-height:1.25; }
.pet-town-onboarding-route { grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; margin:2px 0 4px; }
.pet-town-onboarding-route span { padding:4px; font-size:10.5px; }
.pet-town-onboarding-route b { width:18px; height:18px; font-size:10px; }
.pet-town-onboarding-card .pet-town-account-check { margin:2px 0; font-size:11px; line-height:1.2; }
.pet-town-account-check input { width:15px; min-height:15px; }
.pet-town-onboarding-card input { min-height:44px; padding:8px 10px; }
.pet-town-onboarding-label { margin:3px 0 0; font-size:12px; }
.pet-town-onboarding-options { grid-template-columns:1fr; gap:4px; }
.pet-town-onboarding-option { min-height:44px; display:flex; align-items:center; justify-content:center; gap:6px; padding:6px 8px; font-size:11px; }
.pet-town-onboarding-option small { font-size:9px; }
.pet-town-outfit-preview { width:18px; height:18px; margin:0; border-width:2px; }
.pet-town-onboarding-confirm { min-height:44px; margin-top:4px; }
.pet-town-hud {
top:0;
left:0;
right:auto;
width:0;
max-width:0;
min-height:0;
flex-wrap:nowrap;
gap:0;
padding:0;
font-size:8px;
line-height:1;
border:0;
background:transparent;
box-shadow:none;
backdrop-filter:none;
}
.pet-town-hud strong {
display:none;
}
.pet-town-hud .game-emoji {
display:none;
}
.pet-town-hud b { font-size:10px; }
.pet-town-hud #petTownWorldStatus,
.pet-town-hud #petTownRefreshBtn,
.pet-town-hud-coins,
.pet-town-hud .pet-town-hud-exchange,
.pet-town-hud button[data-fullscreen-target="petTownStage"] { display:none; }
.pet-town-hud #petTownPanelToggleBtn {
position:fixed;
top:max(4px, env(safe-area-inset-top));
right:max(5px, env(safe-area-inset-right));
min-height:18px;
padding:2px 5px;
border-radius:var(--radius-chip);
font-size:8.5px;
line-height:1;
background:rgba(19,31,22,.68);
}
.pet-town-coach {
top:max(4px, env(safe-area-inset-top));
left:max(8px, env(safe-area-inset-left));
right:auto;
max-width:min(286px, calc(100vw - 62px));
gap:4px;
min-height:18px;
padding:2px 6px;
border-radius:9px;
font-size:10.5px;
line-height:1.1;
background:rgba(19,31,22,.58);
}
.pet-town-coach strong { max-width:42%; }
.pet-town-coach span { max-width:58%; }
.pet-town-menu { top:30px; right:5px; bottom:68px; width:min(214px, 33vw); padding:6px; gap:6px; border-radius:var(--radius-card); background:rgba(17,28,20,.72); }
.pet-town-menu-tabs { gap:3px; padding-bottom:2px; }
.pet-town-menu-tabs button { min-height:44px; padding:5px 4px; border-radius:6px; font-size:9.5px; }
.pet-town-focus {
left:8px;
right:8px;
bottom:68px;
max-width:none;
min-height:0;
max-height:43px;
overflow:hidden;
grid-template-columns:auto minmax(0,1fr);
font-size:12px;
line-height:1.18;
padding:5px 7px;
border-radius:10px;
background:rgba(21,34,24,.78);
}
.pet-town-stage:not(.panel-collapsed) .pet-town-focus { right:min(226px, 36vw); }
.pet-town-focus-badge { min-width:36px; padding:2px 5px; font-size:10px; }
.pet-town-focus-control { font-size:10px; }
.pet-town-actions { display:none; }
.pet-town-stage.mobile-input .pet-town-touch,
.pet-town-touch {
display:flex;
left:max(8px, env(safe-area-inset-left));
right:max(8px, env(safe-area-inset-right));
bottom:max(8px, env(safe-area-inset-bottom));
gap:7px;
transform:none;
justify-content:flex-start;
}
.pet-town-auto-button { margin-left:auto; }
.pet-town-joystick { width:64px; height:64px; box-shadow:0 8px 18px rgba(0,0,0,.26), inset 0 0 0 7px rgba(255,255,255,.05); }
.pet-town-joystick span { left:19px; top:19px; width:24px; height:24px; }
.pet-town-use-button { width:56px; height:56px; font-size:13px; background:rgba(255,236,151,.94); }
.pet-town-auto-button { width:54px; height:54px; font-size:11px; background:rgba(201,238,183,.94); }
.pet-town-use-button::after,
.pet-town-auto-button::after { font-size:8.5px; }
.pet-town-msg { display:none; }
.pet-town-inventory { grid-template-columns:repeat(3,minmax(0,1fr)); }
.pet-town-order { grid-template-columns:22px minmax(0,1fr); }
.pet-town-order button { grid-column:2; justify-self:start; min-height:44px; }
.pet-town-stage.panel-collapsed .pet-town-focus { right:8px; max-width:none; }
.pet-town-stage.panel-collapsed .pet-town-msg { max-width:calc(100% - 188px); }
}
@media (max-width:720px) and (orientation:landscape) {
.pet-town-hud { max-width:0; }
.pet-town-hud strong { display:none; }
.pet-town-coach { left:max(8px, env(safe-area-inset-left)); right:auto; max-width:min(292px, calc(100vw - 58px)); font-size:10px; }
.pet-town-menu { width:min(194px, 33vw); }
.pet-town-focus { bottom:66px; font-size:10px; }
.pet-town-joystick { width:62px; height:62px; }
.pet-town-joystick span { left:18px; top:18px; width:24px; height:24px; }
.pet-town-use-button { width:54px; height:54px; }
.pet-town-auto-button { width:50px; height:50px; }
}
@media (max-width:760px) and (orientation:portrait) {
.pet-town-stage { min-height:62svh; }
.pet-town-landscape-tip { display:grid; }
}
@media (max-width:620px) {
.game-hub-body {
gap:12px;
}
.game-hub-section {
padding:12px;
border-radius:var(--radius-card);
}
.game-hub-grid {
grid-template-columns:1fr;
}
.game-hub-grid .tile {
min-height:108px;
}
.game-save-center {
grid-template-columns:1fr;
}
.game-save-actions {
display:grid;
grid-template-columns:1fr;
}
.game-save-file-label {
align-items:flex-start;
flex-direction:column;
}
.game-save-file-label input {
max-width:100%;
}
.game-save-import-preview ul {
columns:1;
}
}
/* ===== v2026.08.23-pet-fields：宠物分页场地 ===== */
.pet-plaza-field[data-field='beach'] {
background:#bcd9c3;
box-shadow:inset 0 -56px 0 rgba(235,188,104,.34),0 20px 50px rgba(0,0,0,.16);
}
.pet-plaza-field[data-field='beach'] .pet-plaza-pond {
left:4%;
bottom:4%;
width:210px;
height:70px;
background:#62c7ee;
border-color:#2f83ad;
box-shadow:inset -30px -16px 0 #2f8fc0,inset 22px 12px 0 rgba(255,255,255,.34);
}
.pet-plaza-field[data-field='beach'] .pet-plaza-tree {
filter:hue-rotate(22deg) saturate(.86);
}
.pet-plaza-field[data-field='night'] {
background:#1f2f3a;
}
.pet-plaza-field[data-field='night'] .pet-plaza-sign {
background:#5540a8;
color:#ffe98a;
box-shadow:0 0 18px rgba(255,232,138,.38),0 16px 0 -10px #2b204d;
}
.pet-plaza-field[data-field='night'] .pet-plaza-fountain {
filter:hue-rotate(82deg) brightness(.8);
}
.pet-plaza-field[data-field='cabin'] {
background:#b7dba0;
}
.pet-plaza-field[data-field='cabin'] .pet-plaza-bench {
right:12%;
top:40%;
width:150px;
height:82px;
border:5px solid #6b432c;
border-top:32px solid #a9673c;
border-bottom:12px solid #6b432c;
border-radius:12px 12px 4px 4px;
background:#f1c37d;
}
.pet-plaza-field[data-field='cabin'] .pet-plaza-bench::before,
.pet-plaza-field[data-field='cabin'] .pet-plaza-bench::after {
bottom:-24px;
}
.pet-plaza-field[data-field='sky'] {
background:#d8eef7;
box-shadow:inset 0 -66px 0 rgba(255,255,255,.42),0 20px 50px rgba(0,0,0,.12);
}
.pet-plaza-field[data-field='sky'] .pet-plaza-tree,
.pet-plaza-field[data-field='sky'] .pet-plaza-pond {
opacity:.42;
filter:saturate(.7) brightness(1.18);
}
.pet-plaza-field[data-field='sky'] .pet-plaza-path {
background:rgba(255,255,255,.66);
border-color:rgba(120,170,220,.38);
}
/* ===== v2026.08.23-jiji-reward：叽叽成功撒星星 ===== */
.jiji-spark-burst {
position:absolute;
right:58px;
top:-8px;
z-index:4;
min-width:76px;
pointer-events:none;
color:var(--gold);
font-size:18px;
letter-spacing:2px;
text-shadow:0 0 12px color-mix(in srgb,var(--gold) 62%,transparent);
animation:jiji-spark-burst .82s var(--page-ease) both;
}
@keyframes jiji-spark-burst {
0% { opacity:0; transform:translate3d(8px,10px,0) scale(.72) rotate(-8deg); }
38% { opacity:1; transform:translate3d(-4px,-8px,0) scale(1.08) rotate(5deg); }
100% { opacity:0; transform:translate3d(-10px,-30px,0) scale(.92) rotate(12deg); }
}
@media (prefers-reduced-motion:reduce) {
.jiji-spark-burst { animation:none; opacity:1; }
}
/* ===== v2026.08.23-desktop-sidebar：桌面左侧轻量导航，移动端仍为底栏 ===== */
@media (min-width:980px) {
body.app-nav-visible .app,
body.app-nav-suppressed .app {
width:min(980px, calc(100% - 150px));
margin-left:126px;
margin-right:auto;
padding-bottom:32px;
}
body.app-nav-suppressed .app-nav,
body.app-nav-visible .app-nav,
html[data-liquid-glass] body.app-nav-suppressed .app-nav,
html[data-liquid-glass] body.app-nav-visible .app-nav {
display:grid;
left:max(18px, env(safe-area-inset-left));
right:auto;
top:50%;
bottom:auto;
width:88px;
max-width:88px;
grid-template-columns:1fr;
gap:8px;
margin:0;
padding:10px;
border-radius:var(--radius-card);
--nav-rise-y:-50%;
transform:translate3d(0,-50%,0);
}
.app-nav-item {
min-height:64px;
padding:8px 6px;
border-radius:var(--radius-card);
}
.app-nav-item.has-unread::after {
top:8px;
right:8px;
}
}
@media (max-width:979px) {
body.app-nav-suppressed .app-nav {
display:none;
}
body.app-nav-suppressed .app {
padding-bottom:max(18px, env(safe-area-inset-bottom));
}
}
/* ===== v2026.08.23-compact-hero：主页介绍和色调浮层节省空间 ===== */
.theme-switch {
position:relative;
overflow:visible;
}
.theme-swatches {
position:absolute;
right:0;
left:auto;
top:auto;
bottom:calc(100% + 8px);
z-index:40;
width:max-content;
max-width:min(320px, calc(100vw - 28px));
max-height:none;
padding:7px 10px;
overflow:visible;
justify-content:flex-end;
opacity:0;
pointer-events:none;
transform:translateY(8px) scale(.98);
border-color:var(--line);
box-shadow:0 14px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
}
.theme-switch.open .theme-swatches {
opacity:1;
pointer-events:auto;
transform:translateY(0) scale(1);
}
@media (hover:hover) and (pointer:fine) {
.theme-switch:hover .theme-swatches,
.theme-switch:focus-within .theme-swatches {
opacity:1;
pointer-events:auto;
transform:translateY(0) scale(1);
}
}
@media (max-width:560px) {
.theme-swatches {
right:0;
max-width:calc(100vw - 24px);
}
}
/* ===== v2026.08.23-kana-permissions-pet：五十音、权限、cyy4444宠物 ===== */
.permission-editor {
display:flex;
flex-direction:column;
gap:10px;
margin:10px 0 12px;
padding:12px;
border:1px solid color-mix(in srgb,var(--line) 78%,transparent);
border-radius:18px;
background:color-mix(in srgb,var(--bg) 74%,transparent);
}
.permission-editor-head {
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:10px;
flex-wrap:wrap;
}
.permission-editor-head strong { color:var(--accent2); }
.permission-check-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
}
.permission-check {
min-height:58px;
display:grid;
grid-template-columns:auto 1fr;
gap:9px;
align-items:center;
padding:9px 10px;
border:1px solid color-mix(in srgb,var(--line) 82%,transparent);
border-radius:16px;
background:color-mix(in srgb,var(--panel) 74%,transparent);
cursor:pointer;
transition:border-color .18s ease, background .18s ease;
}
.permission-check:hover,
.permission-check:has(input:checked),
.permission-check.active {
border-color:color-mix(in srgb,var(--accent2) 58%,var(--line));
background:color-mix(in srgb,var(--accent2) 12%,var(--panel));
}
.permission-check input { width:18px; height:18px; accent-color:var(--accent2); }
.permission-check span { display:flex; flex-direction:column; gap:2px; min-width:0; }
.permission-check strong { font-size:13px; color:var(--text); }
.permission-check em {
font-style:normal;
color:var(--muted);
font-size:11px;
line-height:1.35;
}
.permission-summary {
display:flex;
gap:6px;
flex-wrap:wrap;
}
.permission-summary em {
padding:3px 7px;
border:1px solid color-mix(in srgb,var(--accent2) 38%,var(--line));
border-radius:var(--radius-chip);
background:color-mix(in srgb,var(--accent2) 10%,transparent);
color:var(--accent2);
font-size:11px;
font-style:normal;
font-weight:900;
}
.kana-card { overflow:hidden; }
.kana-body {
padding:20px;
display:flex;
flex-direction:column;
gap:14px;
}
.kana-toolbar {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}
.kana-toolbar label {
display:flex;
flex-direction:column;
gap:6px;
color:var(--muted);
font-size:12px;
font-weight:900;
}
.kana-toolbar select {
width:100%;
min-height:44px;
border-radius:14px;
font-weight:800;
}
.kana-stats {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:8px;
}
.kana-stats span {
min-height:58px;
display:flex;
flex-direction:column;
justify-content:center;
gap:3px;
padding:9px 10px;
border:1px solid var(--line);
border-radius:16px;
background:color-mix(in srgb,var(--bg) 68%,transparent);
color:var(--muted);
font-size:12px;
font-weight:800;
text-align:center;
}
.kana-stats strong {
color:var(--accent2);
font-size:18px;
font-variant-numeric:tabular-nums;
}
.kana-card-stage {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}
.kana-cell {
min-height:126px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:8px;
padding:16px 10px;
border:1px solid color-mix(in srgb,var(--accent2) 18%,var(--line));
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--panel) 78%,transparent);
box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.kana-cell span {
color:var(--muted);
font-size:12px;
font-weight:900;
}
.kana-cell strong {
color:var(--text);
font-size:42px;
line-height:1;
font-weight:900;
font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;
}
.kana-cell.hidden-char strong { color:var(--gold); }
.kana-answer-row {
display:grid;
grid-template-columns:1fr auto;
gap:10px;
align-items:stretch;
}
.kana-answer-row input { min-height:48px; border-radius:var(--radius-control); }
.kana-answer-row button { min-width:96px; }
.kana-actions {
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:8px;
}
.kana-actions button { min-height:44px; }
.kana-chart-panel {
display:flex;
flex-direction:column;
gap:12px;
max-height:420px;
overflow:auto;
padding:12px;
border:1px solid var(--line);
border-radius:18px;
background:color-mix(in srgb,var(--bg) 78%,transparent);
}
.kana-chart-group {
display:flex;
flex-direction:column;
gap:8px;
}
.kana-chart-group strong { color:var(--accent2); }
.kana-chart-grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(64px,1fr));
gap:7px;
}
.kana-chart-grid span {
min-height:58px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
border:1px solid color-mix(in srgb,var(--line) 75%,transparent);
border-radius:14px;
background:color-mix(in srgb,var(--panel) 70%,transparent);
}
.kana-chart-grid b { font-size:20px; line-height:1; }
.kana-chart-grid em { font-style:normal; color:var(--muted); font-size:15px; }
.kana-chart-grid small { color:var(--gold); font-size:11px; font-weight:900; }
#kanaGameBtn::before,
#gameHubKanaBtn::before,
.game-recent[data-game-recent='kana']::before,
.game-recent[data-game-favorite='kana']::before { content:'あ'; }
.game-recent[data-game-recent='gomoku']::before,
.game-recent[data-game-favorite='gomoku']::before { content:'⚫'; }
.game-recent[data-game-recent='draw']::before,
.game-recent[data-game-favorite='draw']::before { content:'🎨'; }
.game-recent[data-game-recent='snake']::before,
.game-recent[data-game-favorite='snake']::before { content:'🐍'; }
.game-recent[data-game-recent='tank']::before,
.game-recent[data-game-favorite='tank']::before { content:'🛡️'; }
.pet-stage[data-species='cyy4444-hamster'] .pet-pixel-image { top:-10px; height:252px; }
.pet-stage[data-species='cyy4444-hamster'] .pet-cyy4444-hamster-image {
filter:drop-shadow(0 20px 18px rgba(0,0,0,.20));
}
.pet-plaza-sprite-stage[data-species='cyy4444-hamster'] .pet-pixel-image {
top:-20px;
height:252px;
}
.pet-plaza-detail .pet-plaza-sprite-stage[data-species='cyy4444-hamster'] .pet-pixel-image {
top:-14px;
height:236px;
}
.pet-species-choice img.pet-cyy4444-hamster-image {
width:38px;
height:38px;
object-position:center bottom;
}
.pet-stage[data-species='rabbit-boss'] .pet-pixel-image {
top:-12px;
width:318px;
height:292px;
}
.pet-stage[data-species='rabbit-boss'] .pet-rabbit-boss-image {
filter:drop-shadow(0 20px 18px rgba(0,0,0,.18));
object-position:center bottom;
}
.pet-plaza-sprite-stage[data-species='rabbit-boss'] .pet-pixel-image {
top:-24px;
width:280px;
height:252px;
}
.pet-plaza-detail .pet-plaza-sprite-stage[data-species='rabbit-boss'] .pet-pixel-image {
top:-14px;
width:260px;
height:234px;
}
.pet-species-choice img.pet-rabbit-boss-image {
width:42px;
height:42px;
object-position:center bottom;
}
@media (max-width:680px) {
.permission-check-grid,
.kana-toolbar,
.kana-card-stage,
.kana-stats {
grid-template-columns:1fr;
}
.kana-actions {
grid-template-columns:repeat(2,minmax(0,1fr));
}
.kana-answer-row {
grid-template-columns:1fr;
}
.kana-answer-row button,
.kana-actions button {
width:100%;
}
.kana-cell { min-height:98px; }
.kana-cell strong { font-size:34px; }
.pet-stage[data-species='cyy4444-hamster'] .pet-pixel-image { top:0; height:232px; }
.pet-stage[data-species='rabbit-boss'] .pet-pixel-image {
top:0;
width:276px;
height:252px;
}
}
/* ===== v2026.08.23-status-snake-audit：状态/速度/浮层体验修复 ===== */
.snake-speed-range-label { min-width:min(320px,100%); }
.snake-speed-label input[type='range'] {
width:150px;
accent-color:var(--accent2);
}
.snake-speed-label output {
min-width:70px;
color:var(--accent2);
font-variant-numeric:tabular-nums;
}
#petMsg {
min-height:36px;
margin:0;
padding:8px 10px;
border-radius:14px;
background:color-mix(in srgb,var(--panel) 38%,transparent);
}
#petMsg:empty { visibility:hidden; display:block; }
.admin-user-audit {
margin-top:6px;
padding:7px 9px;
border:1px solid color-mix(in srgb,var(--admin-line) 70%,transparent);
border-radius:12px;
background:color-mix(in srgb,var(--admin-bg) 68%,transparent);
}
.admin-user-audit summary {
cursor:pointer;
color:var(--admin-accent);
font-size:12px;
font-weight:900;
}
.admin-user-audit span {
display:block;
margin-top:4px;
word-break:break-all;
}
@media (max-width:560px) {
.snake-speed-range-label {
flex:1 0 100%;
justify-content:space-between;
}
.snake-speed-label input[type='range'] {
flex:1;
min-width:120px;
}
}
/* ===== v2026.08.23-kana-choice：五十音四选一挖空 ===== */
.kana-choice-grid {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
}
.kana-choice {
min-height:64px;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
padding:10px 12px;
border:1px solid color-mix(in srgb,var(--accent2) 18%,var(--line));
border-radius:18px;
background:color-mix(in srgb,var(--panel) 82%,transparent);
color:var(--text);
box-shadow:0 10px 20px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.04);
cursor:pointer;
transform:translateY(0) scale(1);
animation:kana-choice-in .24s cubic-bezier(.2,.8,.2,1) both;
transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.kana-choice:nth-child(2) { animation-delay:.035s; }
.kana-choice:nth-child(3) { animation-delay:.07s; }
.kana-choice:nth-child(4) { animation-delay:.105s; }
.kana-choice:hover:not(:disabled) {
transform:translateY(-2px);
border-color:color-mix(in srgb,var(--accent2) 62%,var(--line));
box-shadow:0 14px 28px rgba(0,0,0,.12), 0 0 0 3px color-mix(in srgb,var(--accent2) 10%,transparent);
}
.kana-choice:active:not(:disabled) { transform:translateY(0) scale(.98); }
.kana-choice span {
width:24px;
height:24px;
display:grid;
place-items:center;
flex:0 0 auto;
border-radius:var(--radius-chip);
background:color-mix(in srgb,var(--accent2) 14%,transparent);
color:var(--accent2);
font-size:12px;
font-weight:900;
}
.kana-choice strong {
font-size:clamp(20px,4vw,32px);
line-height:1;
font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;
}
.kana-choice.correct {
border-color:color-mix(in srgb,var(--ok) 72%,var(--line));
background:color-mix(in srgb,var(--ok) 14%,var(--panel));
animation:kana-choice-correct .42s cubic-bezier(.2,.8,.2,1) both;
}
.kana-choice.wrong {
border-color:color-mix(in srgb,var(--danger) 70%,var(--line));
background:color-mix(in srgb,var(--danger) 12%,var(--panel));
animation:kana-choice-wrong .34s ease both;
}
.kana-choice:disabled { opacity:1; cursor:default; }
.kana-choice:disabled:not(.correct):not(.wrong) { opacity:.62; }
@keyframes kana-choice-in {
from { opacity:0; transform:translateY(10px) scale(.96); }
to { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes kana-choice-correct {
0% { transform:scale(1); }
45% { transform:scale(1.045); }
100% { transform:scale(1); }
}
@keyframes kana-choice-wrong {
0%,100% { transform:translateX(0); }
25% { transform:translateX(-5px); }
55% { transform:translateX(5px); }
78% { transform:translateX(-2px); }
}
@media (max-width:680px) {
.kana-choice-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.kana-choice { min-height:58px; }
}
@media (prefers-reduced-motion:reduce) {
.kana-choice,
.kana-choice.correct,
.kana-choice.wrong { animation:none; transition:none; }
}
/* ===== v2026.08.23-cookie-clicker：曲奇计数器 ===== */
.cookie-card { position:relative; overflow:hidden; }
.cookie-body {
display:grid;
grid-template-columns:minmax(260px,.9fr) minmax(300px,1.1fr);
gap:16px;
align-items:start;
}
.cookie-oven,
.cookie-panel {
border:1px solid color-mix(in srgb,var(--accent2) 18%,var(--line));
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--panel) 82%,transparent);
box-shadow:0 16px 34px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.04);
}
.cookie-oven {
min-height:420px;
display:grid;
place-items:center;
align-content:center;
gap:16px;
padding:22px;
}
.big-cookie {
position:relative;
width:min(240px,64vw);
aspect-ratio:1;
display:grid;
place-items:center;
border:0;
border-radius:50%;
background:color-mix(in srgb,var(--gold) 10%,var(--panel));
box-shadow:0 18px 42px rgba(0,0,0,.14),0 0 54px rgba(255,216,77,.20), inset 0 1px 0 rgba(255,255,255,.16);
cursor:pointer;
touch-action:manipulation;
user-select:none;
-webkit-user-select:none;
transform:translateZ(0);
will-change:transform,filter;
transition:transform .12s ease, filter .16s ease;
}
.big-cookie::before {
content:'';
position:absolute;
inset:12%;
border-radius:inherit;
background:rgba(255,216,77,.14);
opacity:.75;
filter:blur(14px);
z-index:-1;
}
.big-cookie span { font-size:clamp(112px,28vw,190px); filter:drop-shadow(0 16px 18px rgba(0,0,0,.20)) drop-shadow(0 0 22px rgba(255,216,77,.28)); }
.big-cookie:hover { filter:saturate(1.1) brightness(1.04); transform:translateY(-2px) scale(1.02); }
.big-cookie:active { transform:translateY(2px) scale(.965); }
.cookie-stats {
width:100%;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
}
.cookie-stats span,
.cookie-buffs .pill {
padding:9px 10px;
border:1px solid color-mix(in srgb,var(--line) 76%,transparent);
border-radius:14px;
background:color-mix(in srgb,var(--panel) 48%,transparent);
font-size:12px;
}
.cookie-stats strong { display:block; font-size:18px; color:var(--accent2); font-variant-numeric:tabular-nums; }
.cookie-side { display:grid; gap:12px; }
.cookie-panel { padding:14px; }
.cookie-panel-head {
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
margin-bottom:10px;
}
.cookie-panel select {
min-height:34px;
border-radius:12px;
border:1px solid var(--line);
background:var(--panel);
color:var(--text);
}
.cookie-list { display:grid; gap:8px; }
.cookie-row {
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
padding:10px 12px;
border:1px solid color-mix(in srgb,var(--line) 80%,transparent);
border-radius:16px;
background:color-mix(in srgb,var(--card) 72%,transparent);
color:var(--text);
text-align:left;
}
button.cookie-row { cursor:pointer; transition:transform .14s ease, border-color .14s ease, opacity .14s ease; }
button.cookie-row:hover:not(:disabled) { transform:translateY(-1px); border-color:color-mix(in srgb,var(--accent2) 48%,var(--line)); }
button.cookie-row:disabled { opacity:.56; cursor:not-allowed; }
.cookie-row span { display:grid; gap:2px; }
.cookie-row small { color:var(--muted); font-size:12px; }
.cookie-row em { flex:0 0 auto; color:var(--gold); font-style:normal; font-weight:900; text-align:right; }
.cookie-row-static { cursor:default; }
.cookie-row.unlocked { border-color:color-mix(in srgb,var(--gold) 42%,var(--line)); background:color-mix(in srgb,var(--gold) 10%,var(--card)); }
.cookie-row.unlocked em { color:var(--accent2); }
.cookie-card.cookie-screen-pulse::after {
content:'';
position:absolute;
inset:0;
pointer-events:none;
background:rgba(255,216,77,.12);
animation:cookie-screen-pulse .42s ease-out both;
}
.big-cookie.cookie-slam { animation:cookie-slam .32s cubic-bezier(.12,1.8,.28,1) both; }
.cookie-click-pop {
position:absolute;
z-index:40;
pointer-events:none;
transform:translate(-50%,-50%);
color:#ffe082;
font-weight:1000;
font-size:clamp(12px,2.2vw,19px);
text-shadow:0 2px 6px rgba(0,0,0,.26),0 0 10px rgba(255,216,77,.30);
animation:cookie-click-pop 1.25s cubic-bezier(.12,1.15,.24,1) forwards;
}
.cookie-hit-ring {
position:absolute;
z-index:38;
width:28px;
height:28px;
pointer-events:none;
border:3px solid rgba(255,224,130,.95);
border-radius:50%;
transform:translate(-50%,-50%);
box-shadow:0 0 36px rgba(255,216,77,.86),0 0 90px rgba(255,159,28,.34);
animation:cookie-hit-ring .64s cubic-bezier(.12,1.35,.24,1) forwards;
}
.cookie-crumb {
position:absolute;
z-index:39;
width:11px;
height:11px;
pointer-events:none;
border-radius:var(--radius-chip) var(--radius-chip) 4px var(--radius-chip);
background:#c8843f;
box-shadow:inset 0 2px 2px rgba(255,255,255,.28),0 4px 10px rgba(0,0,0,.18);
animation:cookie-crumb 1.38s cubic-bezier(.16,.82,.18,1) forwards;
}
.cookie-building-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; cursor:default; }
.cookie-building-row.unaffordable { opacity:.72; }
.cookie-building-row.unaffordable .cookie-building-buy { color:var(--muted); }
.cookie-building-buy {
min-width:88px;
display:grid;
justify-items:center;
gap:1px;
padding:8px 12px;
border:1px solid color-mix(in srgb,var(--gold) 48%,var(--line));
border-radius:16px;
background:color-mix(in srgb,var(--gold) 16%,var(--panel));
color:var(--accent2);
font-weight:1000;
cursor:pointer;
box-shadow:0 8px 18px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.14);
transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.cookie-building-buy small { font-size:11px; color:var(--gold); font-weight:900; }
.cookie-building-buy:hover:not(:disabled) { transform:translateY(-2px) scale(1.04); filter:saturate(1.12) brightness(1.06); box-shadow:0 14px 28px rgba(0,0,0,.18),0 0 24px color-mix(in srgb,var(--gold) 28%,transparent); }
.cookie-building-buy:active:not(:disabled) { transform:translateY(1px) scale(.96); }
.cookie-building-buy:disabled { opacity:.48; cursor:not-allowed; filter:grayscale(.25); }
.cookie-building-icon {
width:36px;
height:36px;
display:grid;
place-items:center;
border-radius:13px;
background:color-mix(in srgb,var(--gold) 16%,transparent);
border:1px solid color-mix(in srgb,var(--gold) 28%,transparent);
font-size:20px;
}
.cookie-purchase-dialog.hidden { display:none; }
.cookie-purchase-dialog { position:fixed; z-index:10020; inset:0; display:grid; place-items:center; padding:18px; overscroll-behavior:contain; }
.cookie-purchase-backdrop { position:fixed; inset:0; background:rgba(12,8,5,.58); backdrop-filter:blur(12px) saturate(1.2); }
.cookie-purchase-card {
position:relative;
width:min(540px,calc(100vw - 28px));
max-height:calc(100dvh - 34px);
overflow:auto;
display:grid;
gap:14px;
padding:18px;
border:1px solid color-mix(in srgb,var(--gold) 34%,var(--line));
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--card) 94%,transparent);
box-shadow:0 34px 100px rgba(0,0,0,.46),0 0 80px rgba(255,216,77,.20), inset 0 1px 0 rgba(255,255,255,.12);
animation:cookie-purchase-in .24s cubic-bezier(.12,1.45,.28,1) both;
}
.cookie-purchase-close { position:absolute; right:12px; top:12px; width:44px; height:44px; min-width:44px; min-height:44px; padding:0; border-radius:var(--radius-chip); }
.cookie-purchase-hero { display:flex; align-items:center; gap:14px; padding-right:36px; }
.cookie-purchase-hero > span {
width:64px;
height:64px;
display:grid;
place-items:center;
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--gold) 18%,transparent);
font-size:34px;
}
.cookie-purchase-hero strong { display:block; font-size:22px; }
.cookie-purchase-hero small { color:var(--muted); }
.cookie-purchase-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.cookie-purchase-grid span { padding:10px; border-radius:var(--radius-card); background:color-mix(in srgb,var(--panel) 52%,transparent); border:1px solid var(--line-soft); }
.cookie-purchase-grid strong { display:block; color:var(--gold); }
.cookie-buy-confirm { min-height:48px; border-radius:var(--radius-control); font-weight:1000; }
.cookie-action-row {
display:flex;
flex-wrap:wrap;
gap:6px;
}
.cookie-mini-action {
min-height:44px;
padding:8px 10px;
border-radius:var(--radius-chip);
border:1px solid color-mix(in srgb,var(--line) 80%,transparent);
background:color-mix(in srgb,var(--panel) 64%,transparent);
color:var(--text);
font-size:12px;
cursor:pointer;
}
.cookie-mini-action.active {
border-color:color-mix(in srgb,var(--gold) 62%,var(--line));
background:color-mix(in srgb,var(--gold) 18%,var(--panel));
color:var(--accent2);
font-weight:900;
}
.cookie-mini-action:disabled { opacity:.48; cursor:not-allowed; }
.cookie-buy-fx {
position:fixed;
z-index:10040;
inset:0;
display:grid;
place-items:center;
pointer-events:none;
overflow:hidden;
background:rgba(40,20,4,.26);
animation:cookie-buy-fade 2.3s ease both;
}
.cookie-buy-fx-track {
position:absolute;
inset:auto 0 18%;
display:flex;
justify-content:space-around;
font-size:clamp(48px,12vw,112px);
opacity:.55;
filter:drop-shadow(0 14px 18px rgba(0,0,0,.22));
animation:cookie-buy-track 1.8s cubic-bezier(.12,1.2,.22,1) both;
}
.cookie-buy-fx-card {
display:grid;
justify-items:center;
gap:4px;
padding:26px 34px;
border-radius:var(--radius-card);
background:rgba(255,238,176,.94);
color:#3b1e0b;
box-shadow:0 24px 70px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.65);
animation:cookie-buy-card 1.45s cubic-bezier(.12,1.5,.24,1) both;
}
.cookie-buy-fx-emoji { font-size:76px; filter:drop-shadow(0 8px 12px rgba(0,0,0,.18)); }
.cookie-buy-fx-card strong { font-size:24px; }
.cookie-buy-fx-card em { color:#8a4e24; font-style:normal; font-weight:1000; }
.cookie-buy-fx-card small { max-width:360px; text-align:center; color:#5c3216; }
.cookie-buy-fx i {
position:absolute;
left:var(--x);
bottom:-36px;
font-style:normal;
font-size:var(--size);
animation:cookie-buy-rain 1.85s cubic-bezier(.14,.9,.18,1) var(--delay) both;
}
@keyframes cookie-slam {
0% { transform:scale(1); filter:saturate(1); }
26% { transform:scale(.78) rotate(-4deg); filter:saturate(1.45) brightness(1.16); }
58% { transform:scale(1.18) rotate(3deg); }
82% { transform:scale(.98) rotate(-1deg); }
100% { transform:scale(1); }
}
@keyframes cookie-screen-pulse { from { opacity:1; } to { opacity:0; } }
@keyframes cookie-click-pop {
0% { opacity:0; transform:translate(-50%,-22%) scale(.42) rotate(-6deg); }
18% { opacity:1; transform:translate(-50%,-72%) scale(1.08) rotate(2deg); }
100% { opacity:0; transform:translate(-50%,-155%) scale(.62) rotate(-5deg); }
}
@keyframes cookie-crumb {
0% { opacity:1; transform:translate(-50%,-50%) scale(.7) rotate(0); }
72% { opacity:.86; }
100% { opacity:0; transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.32) rotate(var(--r)); }
}
@keyframes cookie-hit-ring {
0% { opacity:1; transform:translate(-50%,-50%) scale(.2); }
46% { opacity:.75; transform:translate(-50%,-50%) scale(7); }
100% { opacity:0; transform:translate(-50%,-50%) scale(13); }
}
@keyframes cookie-purchase-in { from { opacity:0; transform:translateY(34px) scale(.86); } 70% { opacity:1; transform:translateY(-4px) scale(1.025); } to { opacity:1; transform:none; } }
@keyframes cookie-buy-fade { 0%,72% { opacity:1; } 100% { opacity:0; } }
@keyframes cookie-buy-card { 0% { opacity:0; transform:scale(.42) translateY(42px) rotate(-5deg); } 28% { opacity:1; transform:scale(1.22) translateY(-10px) rotate(2deg); } 62% { transform:scale(.96) translateY(0) rotate(-1deg); } 100% { opacity:1; transform:scale(1); } }
@keyframes cookie-buy-track { 0% { opacity:0; transform:translateY(120px) scale(.9); } 30% { opacity:.65; transform:translateY(0) scale(1.04); } 100% { opacity:0; transform:translateY(-120px) scale(1.18); } }
@keyframes cookie-buy-rain { 0% { opacity:0; transform:translateY(0) scale(.55) rotate(0); } 14% { opacity:1; } 100% { opacity:0; transform:translateY(-112vh) scale(1.25) rotate(var(--spin)); } }
.golden-cookie {
position:absolute;
z-index:30;
width:72px;
height:72px;
border:0;
border-radius:50%;
background:#f7b731;
box-shadow:0 0 0 6px rgba(247,183,49,.14),0 16px 28px rgba(0,0,0,.22);
font-size:30px;
cursor:pointer;
animation:golden-cookie-pop .5s cubic-bezier(.2,.8,.2,1) both, golden-cookie-float 1.2s ease-in-out infinite alternate;
}
@keyframes golden-cookie-pop {
from { opacity:0; transform:scale(.4) rotate(-18deg); }
to { opacity:1; transform:scale(1) rotate(0); }
}
@keyframes golden-cookie-float {
from { translate:0 -3px; }
to { translate:0 5px; }
}
@media (max-width:760px) {
.cookie-body { grid-template-columns:1fr; }
.cookie-oven { min-height:360px; }
.cookie-stats { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
.big-cookie,
button.cookie-row,
.golden-cookie,
.cookie-click-pop,
.cookie-hit-ring,
.cookie-crumb,
.cookie-buy-fx,
.cookie-buy-fx-track,
.cookie-buy-fx *,
.cookie-purchase-card { animation:none; transition:none; }
}
/* ===== v2026.08.23-review-fixes：状态降级/提示稳定/面板完整显示 ===== */
#petMsg {
height:42px;
max-height:42px;
overflow:auto;
line-height:1.35;
}
.theme-switch .theme-swatches {
bottom:max(92px, calc(86px + env(safe-area-inset-bottom)));
max-height:min(62dvh, 420px);
overscroll-behavior:contain;
}
@media (max-width:560px) {
.theme-switch .theme-swatches {
left:12px;
right:12px;
width:auto;
justify-content:center;
}
}
.game-emoji { display:inline-grid; place-items:center; width:1.8em; height:1.8em; margin-right:.38em; border-radius:12px; background:color-mix(in srgb,var(--accent2) 16%,transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
/* ===== 宠物小屋连点爱心互动 ===== */
.pet-stage .pixel-pet { cursor:pointer; touch-action:manipulation; }
.pet-stage.pet-heart-tap .pixel-pet { animation:pet-heart-boop .26s cubic-bezier(.2,1.35,.34,1) both; }
.pet-heart-bubble {
position:absolute;
z-index:26;
width:30px;
height:30px;
display:grid;
place-items:center;
color:#ff5f9a;
font-size:22px;
font-weight:900;
text-shadow:0 2px 0 rgba(255,255,255,.72),0 10px 18px rgba(255,95,154,.28);
opacity:0;
pointer-events:none;
transform:translate(-50%,-50%) scale(.65) rotate(var(--rot,0deg));
animation:pet-heart-float .9s var(--delay,0ms) cubic-bezier(.17,.84,.32,1) forwards;
}
@keyframes pet-heart-boop {
0% { transform:translateX(-50%) scale(1); }
45% { transform:translateX(-50%) scale(1.075) rotate(-1.4deg); }
100% { transform:translateX(-50%) scale(1); }
}
@keyframes pet-heart-float {
0% { opacity:0; transform:translate(-50%,-45%) scale(.55) rotate(var(--rot,0deg)); }
18% { opacity:1; transform:translate(calc(-50% + var(--dx,0px) * .2),-80%) scale(1.12) rotate(var(--rot,0deg)); }
100% { opacity:0; transform:translate(calc(-50% + var(--dx,0px)),-190%) scale(.82) rotate(var(--rot,0deg)); }
}
@media (prefers-reduced-motion:reduce) {
.pet-stage.pet-heart-tap .pixel-pet { animation:none; }
.pet-heart-bubble { animation:pet-heart-fade .45s ease forwards; }
@keyframes pet-heart-fade { from { opacity:1; } to { opacity:0; } }
}
/* ===== v2026.08.24-admin-ops：备份与体验巡检 ===== */
.admin-backup-panel .health-actions,
.ux-probe-list .health-actions { margin-bottom:10px; }
.backup-count-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:8px;
}
.backup-count-grid span {
display:flex;
justify-content:space-between;
gap:8px;
padding:9px 10px;
border:1px solid var(--line-soft);
border-radius:14px;
background:color-mix(in srgb,var(--panel) 58%,transparent);
}
.backup-count-grid strong { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.backup-count-grid em { color:var(--gold); font-style:normal; font-weight:900; }
.backup-history {
margin-top:10px;
padding:10px 12px;
border:1px solid var(--line-soft);
border-radius:16px;
background:color-mix(in srgb,var(--panel) 42%,transparent);
}
.backup-history summary { cursor:pointer; font-weight:900; color:var(--text); }
.backup-history-row {
display:grid;
grid-template-columns:64px minmax(0,1fr) 52px;
gap:8px;
align-items:center;
padding:8px 0;
border-top:1px solid var(--line-soft);
font-size:12px;
}
.backup-history-row strong { color:var(--accent2); }
.backup-history-row span { color:var(--muted); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.backup-history-row em { justify-self:end; color:var(--gold); font-style:normal; font-weight:900; }
.backup-preview-head {
display:flex;
justify-content:space-between;
gap:10px;
align-items:flex-start;
padding:10px 12px;
border:1px solid var(--line-soft);
border-radius:16px;
background:color-mix(in srgb,var(--panel) 52%,transparent);
}
.backup-preview-head > div:first-child {
display:grid;
gap:3px;
min-width:0;
}
.backup-restore-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
gap:8px;
margin-top:8px;
}
.backup-restore-item {
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:9px;
align-items:center;
min-height:48px;
padding:9px 10px;
border:1px solid var(--line-soft);
border-radius:14px;
background:color-mix(in srgb,var(--panel) 42%,transparent);
}
.backup-restore-item.selected {
border-color:color-mix(in srgb,var(--gold) 48%,var(--line));
background:color-mix(in srgb,var(--gold) 8%,var(--bg));
}
.backup-restore-item input { width:18px; height:18px; accent-color:var(--accent); }
.backup-restore-item span { display:grid; gap:2px; min-width:0; }
.backup-restore-item strong { font-size:13px; }
.backup-restore-item em { color:var(--muted); font-size:12px; font-style:normal; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ux-probe-summary {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
gap:8px;
margin-bottom:10px;
}
.ux-probe-summary span {
display:grid;
gap:2px;
padding:9px 10px;
border:1px solid var(--line-soft);
border-radius:14px;
background:color-mix(in srgb,var(--panel) 52%,transparent);
}
.ux-probe-summary strong { font-size:18px; line-height:1; color:var(--text); }
.ux-probe-summary em { color:var(--muted); font-size:12px; font-style:normal; font-weight:800; }
.ux-probe-group {
display:grid;
gap:8px;
margin-top:10px;
}
.ux-probe-group-head {
display:flex;
justify-content:space-between;
gap:10px;
align-items:center;
color:var(--muted);
font-size:12px;
font-weight:900;
}
.ux-probe-group-head strong { color:var(--text); }
.ux-probe-item.ok { border-color:color-mix(in srgb,#2ec27e 35%,var(--line)); }
.ux-probe-item.slow { border-color:color-mix(in srgb,var(--gold) 42%,var(--line)); background:color-mix(in srgb,var(--gold) 7%,transparent); }
.ux-probe-item.danger { border-color:color-mix(in srgb,#ff5f6d 42%,var(--line)); background:color-mix(in srgb,#ff5f6d 8%,transparent); }
#backupPreviewInput {
min-width:0;
color:var(--muted);
font-size:12px;
}
/* ===== v2026.08.24-audit-center：异常洞察与操作日志 ===== */
.error-insight-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:8px;
margin-bottom:10px;
}
.error-insight-grid span {
display:flex;
flex-direction:column;
gap:4px;
padding:10px;
border:1px solid var(--line-soft);
border-radius:14px;
background:color-mix(in srgb,var(--panel) 55%,transparent);
}
.error-insight-grid strong { font-size:12px; color:var(--muted); }
.error-insight-grid em { font-style:normal; font-size:12px; line-height:1.35; color:var(--gold); overflow-wrap:anywhere; }
.error-trend em {
display:flex;
align-items:end;
gap:4px;
height:34px;
}
.error-trend i {
width:9px;
height:var(--h,8%);
min-height:4px;
border-radius:var(--radius-chip);
background:var(--card);
}
.error-detail summary {
cursor:pointer;
color:var(--accent2);
font-size:12px;
font-weight:800;
}
.audit-item strong { color:var(--accent2); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; }
/* ===== v2026.08.24-pet-diary：宠物长期养成记录 ===== */
.pet-diary-list { display:grid; gap:8px; }
.pet-diary-item {
display:flex;
justify-content:space-between;
gap:10px;
padding:10px 12px;
border:1px solid var(--line-soft);
border-radius:16px;
background:color-mix(in srgb,var(--panel) 52%,transparent);
}
.pet-diary-item strong { font-size:13px; line-height:1.35; }
.pet-diary-item span { flex:0 0 auto; }
@media (max-width:560px) {
.pet-diary-item { flex-direction:column; gap:4px; }
}
/* v2026.08.24 稳态化收口：成就、安全事件、移动端触达 */
.achievement-chip-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.achievement-chip { display:inline-flex; align-items:center; gap:4px; max-width:100%; padding:6px 9px; border-radius:var(--radius-chip); border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line)); background:color-mix(in srgb,var(--accent) 10%,transparent); color:var(--text); font-size:12px; font-weight:800; }
.achievement-summary { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:var(--radius-chip); background:color-mix(in srgb,var(--gold) 14%,transparent); color:var(--text); font-size:12px; font-weight:900; }
.achievement-summary span { color:var(--muted); font-weight:800; }
.achievement-chip.locked { opacity:.58; filter:saturate(.55); border-color:var(--line-soft); background:color-mix(in srgb,var(--panel) 45%,transparent); }
.security-event-list { margin-bottom:10px; }
.security-event-head {
display:flex;
justify-content:space-between;
align-items:center;
gap:8px;
margin-bottom:8px;
color:var(--muted);
font-size:12px;
}
.security-event-list .row-item { border-color:color-mix(in srgb,var(--gold) 24%,var(--line)); }
.security-event.info { background:color-mix(in srgb,var(--panel) 58%,transparent); }
.security-event.warn { border-color:color-mix(in srgb,var(--gold) 42%,var(--line)); background:color-mix(in srgb,var(--gold) 7%,transparent); }
.security-event.danger { border-color:color-mix(in srgb,#ff5f6d 36%,var(--line)); background:color-mix(in srgb,#ff5f6d 7%,transparent); }
#backupRestoreConfirm { min-width:220px; }
@media (max-width:560px) {
.backup-preview-head { flex-direction:column; }
.backup-preview-head .health-actions { width:100%; }
.ux-probe-item { grid-template-columns:1fr; }
.ux-probe-item .row-item-actions { justify-content:flex-end; }
.security-event-head { align-items:flex-start; flex-direction:column; }
button,.small,.ghost.small,input,select,textarea { min-height:44px; }
.admin-work-tabs,.health-actions,.admin-quick-grid,.achievement-chip-list { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.admin-panel,.profile-card-preview,.pet-card,.game-hub-section { max-width:100%; overflow-wrap:anywhere; }
.jiji-chat-panel { max-height:min(460px, calc(100svh - 108px)); }
.snake-screen,.tank-screen,.cookie-fullscreen-stage { max-width:100%; overflow:hidden; }
.modal-card,.cookie-buy-sheet { width:min(94vw, 520px); max-height:calc(100svh - 32px); overflow:auto; }
}
.pet-plaza-summary em { display:block; margin-top:3px; color:var(--gold); font-size:11px; font-style:normal; font-weight:900; max-width:min(520px, 76vw); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:560px) { .pet-plaza-summary em { max-width:72vw; white-space:normal; line-height:1.35; } }
/* ===== v2026.08.25：互动回复与状态展示 ===== */
.plaza-replies { display:flex; flex-direction:column; gap:6px; margin:10px 0 4px; padding-left:10px; border-left:2px solid color-mix(in srgb,var(--accent2) 28%,var(--line)); }
.plaza-reply { display:flex; gap:8px; align-items:flex-start; padding:8px 10px; border:1px solid var(--line-soft); border-radius:var(--radius-card); background:color-mix(in srgb,var(--panel) 34%,transparent); font-size:13px; line-height:1.45; }
.plaza-reply strong { flex:0 0 auto; color:var(--accent2); }
.plaza-reply span { min-width:0; overflow-wrap:anywhere; }
.plaza-reply em { margin-left:auto; color:var(--gold); font-style:normal; font-size:11px; font-weight:900; }
.plaza-reply-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; margin-top:10px; }
.plaza-reply-form input { min-height:44px; padding:10px 12px; border-radius:var(--radius-chip); font-size:13px; }
.plaza-reply-form button { min-height:44px; padding:0 12px; }
/* ===== v2026.08.26-bread-empire：自动化面包帝国嵌入 ===== */
.bread-empire-card {
background:var(--card);
}
.bread-empire-shell {
border-color:color-mix(in srgb,#e8aa45 42%,var(--line));
background:#160d05;
}
.bread-empire-shell::before {
content:'🥖 Bread Empire';
color:color-mix(in srgb,#f7c86a 68%,white);
}
.bread-empire-shell iframe {
min-height:760px;
background:#160d05;
}
@media (max-width:720px) {
.bread-empire-shell iframe { min-height:720px; }
}
/* ===== v2026.08.26-maze-game：Maze 100 嵌入 ===== */
.maze-game-card {
background:var(--card);
}
.maze-game-shell {
border-color:color-mix(in srgb,#62d6a3 42%,var(--line));
background:#11151d;
}
.maze-game-shell::before {
content:'🧭 百关迷宫';
color:color-mix(in srgb,#62d6a3 68%,white);
}
.maze-game-shell iframe {
min-height:960px;
background:#11151d;
}
@media (max-width:720px) {
.maze-game-shell iframe { min-height:920px; }
}
/* ===== v2026.08.26-breakout-overdrive：打砖块超载嵌入 ===== */
.breakout-game-card {
background:var(--card);
}
.breakout-game-shell {
border-color:color-mix(in srgb,#33e9ff 42%,var(--line));
background:#07080f;
}
.breakout-game-shell::before {
content:'🧱 Breakout Overdrive';
color:color-mix(in srgb,#33e9ff 68%,white);
}
.breakout-game-shell iframe {
min-height:760px;
background:#07080f;
}
@media (max-width:720px) {
.breakout-game-shell iframe { min-height:640px; }
}
/* ===== v2026.08.26-tools：MBTI 与食物热量计算嵌入 ===== */
.tool-embed-card {
background:var(--card);
}
.tool-embed-shell {
border-color:color-mix(in srgb,var(--accent2) 36%,var(--line));
background:color-mix(in srgb,var(--bg) 82%,#070a12);
}
.tool-embed-shell::before {
content:'🧰 小工具';
color:color-mix(in srgb,var(--accent2) 68%,white);
}
.tool-embed-shell iframe {
min-height:760px;
background:color-mix(in srgb,var(--bg) 82%,#070a12);
}
.mbti-quiz-shell::before { content:'🧠 MBTI 小测验'; }
.calorie-calc-shell::before { content:'🥗 食物热量计算'; }
.calorie-calc-shell {
background:#fff8e6;
}
.calorie-calc-shell iframe {
min-height:840px;
background:#fff8e6;
}
@media (max-width:720px) {
.tool-embed-shell iframe { min-height:720px; }
.calorie-calc-shell iframe { min-height:820px; }
}
/* ===== v2026.08.26-typing-speed：打字速度测试嵌入 ===== */
.typing-speed-card {
background:var(--card);
}
.typing-speed-shell.tst-widget {
--tst-bg: color-mix(in srgb,var(--panel) 62%,transparent);
--tst-surface: color-mix(in srgb,var(--card) 88%,transparent);
--tst-surface-2: color-mix(in srgb,var(--bg) 72%,transparent);
--tst-text: var(--text);
--tst-muted: var(--muted);
--tst-border: var(--line-soft);
--tst-accent: var(--accent);
--tst-accent-2: var(--gold);
--tst-shadow: none;
width:calc(100% - 28px);
max-width:none;
margin:14px;
border-radius:var(--radius-card);
border-color:color-mix(in srgb,var(--accent) 36%,var(--line));
box-shadow:0 22px 50px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
}
.typing-speed-shell.tst-widget .tst-button,
.typing-speed-shell.tst-widget .tst-select,
.typing-speed-shell.tst-widget .tst-metric,
.typing-speed-shell.tst-widget .tst-prompt,
.typing-speed-shell.tst-widget .tst-input,
.typing-speed-shell.tst-widget .tst-result,
.typing-speed-shell.tst-widget .tst-result-item {
border-radius:16px;
}
.typing-speed-shell.tst-widget .tst-button {
min-height:44px;
transition:transform .16s ease, border-color .16s ease, background .16s ease;
}
.typing-speed-shell.tst-widget .tst-button:active {
transform:scale(.98);
}
.typing-speed-shell.tst-widget .tst-prompt {
min-height:170px;
}
@media (max-width:720px) {
.typing-speed-shell.tst-widget {
width:calc(100% - 20px);
margin:10px;
border-radius:var(--radius-card);
}
.typing-speed-shell.tst-widget .tst-prompt {
max-height:260px;
}
}
/* ===== v2026.08.27-entry-fixes：投票与宠物图鉴 ===== */
.feature-vote-box,
.feature-vote-list,
.pet-catalog-list {
display:grid;
gap:10px;
}
.feature-vote-box {
padding:14px;
border:1px solid var(--line-soft);
border-radius:var(--radius-card);
background:var(--card);
}
.feature-vote-head {
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
.feature-vote-head > div,
.feature-vote-main,
.pet-catalog-main {
min-width:0;
display:flex;
flex-direction:column;
gap:3px;
}
.feature-vote-head strong,
.feature-vote-main strong,
.pet-catalog-main strong {
color:var(--accent2);
}
.feature-vote-item,
.pet-catalog-card {
min-width:0;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
gap:10px;
padding:11px 12px;
border:1px solid var(--line-soft);
border-radius:18px;
background:color-mix(in srgb,var(--bg) 70%,transparent);
}
.feature-vote-action { min-height:44px; }
.feature-vote-item.voted,
.pet-catalog-card.active {
border-color:color-mix(in srgb,var(--gold) 52%,var(--line));
background:color-mix(in srgb,var(--gold) 8%,var(--bg));
}
.feature-vote-admin-list .row-item:first-child {
border-color:color-mix(in srgb,var(--admin-warn) 45%,var(--admin-line));
background:color-mix(in srgb,var(--admin-warn) 7%,var(--admin-bg));
}
.feature-vote-main span,
.pet-catalog-main em,
.pet-catalog-main small {
color:var(--muted);
font-size:12px;
line-height:1.35;
font-style:normal;
}
.feature-idea-form {
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:8px;
}
.pet-catalog-list {
grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.pet-catalog-card {
grid-template-columns:52px minmax(0,1fr);
text-align:left;
color:var(--text);
box-shadow:none;
}
.pet-catalog-card.locked {
opacity:.62;
}
.pet-catalog-visual {
width:52px;
height:52px;
display:grid;
place-items:center;
border:1px solid var(--line-soft);
border-radius:16px;
background:color-mix(in srgb,var(--panel) 68%,transparent);
font-size:28px;
overflow:hidden;
}
.pet-catalog-visual img {
width:100%;
height:100%;
object-fit:contain;
object-position:center;
display:block;
}
@media (max-width:560px) {
.feature-vote-item,
.feature-idea-form {
grid-template-columns:1fr;
align-items:stretch;
}
.feature-vote-head {
display:grid;
grid-template-columns:1fr;
align-items:stretch;
}
.feature-vote-item .feature-vote-action,
.feature-idea-form button {
width:100%;
}
}
/* ===== v2026.08.28-pet-photo-pwa：宠物合影与 PWA ===== */
.pet-photo-card,
.pwa-install-card,
.mcu-image-card {
overflow:hidden;
background:var(--card);
}
.pet-photo-body,
.pwa-install-body,
.mcu-image-body {
padding:16px 14px;
display:flex;
flex-direction:column;
gap:14px;
}
.pet-photo-controls {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
align-items:end;
}
.pet-photo-controls .field-label {
margin-bottom:-4px;
}
.pet-photo-pet-list {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:8px;
}
.pet-photo-choice {
min-height:104px;
display:flex;
flex-direction:column;
align-items:stretch;
gap:7px;
padding:8px 10px;
border:1px solid var(--line-soft);
border-radius:18px;
background:color-mix(in srgb,var(--bg) 72%,transparent);
color:var(--text);
box-shadow:none;
}
.pet-photo-choice.active {
border-color:color-mix(in srgb,var(--gold) 58%,var(--line));
background:color-mix(in srgb,var(--gold) 10%,var(--bg));
}
.pet-photo-choice-toggle {
width:100%;
min-height:66px;
display:grid;
grid-template-columns:58px 1fr;
align-items:center;
gap:8px;
padding:0;
border:0;
border-radius:14px;
background:transparent;
color:inherit;
box-shadow:none;
text-align:left;
}
.pet-photo-choice-toggle:hover:not(:disabled),
.pet-photo-choice-toggle:active:not(:disabled) {
transform:none;
box-shadow:none;
}
.pet-photo-choice-stage {
position:relative;
flex:0 0 58px;
width:58px;
height:56px;
overflow:visible;
}
.pet-photo-choice-stage .pet-plaza-sprite-stage {
position:absolute;
left:50%;
top:-8px;
width:112px;
height:100px;
transform:translateX(-50%) scale(.42);
transform-origin:top center;
}
.pet-photo-choice-main {
min-width:0;
display:flex;
flex-direction:column;
gap:2px;
text-align:left;
}
.pet-photo-choice em {
color:var(--muted);
font-size:11px;
font-style:normal;
}
.pet-photo-choice-hint,
.pet-photo-action-picker {
min-height:44px;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
padding:5px 8px;
border:1px solid color-mix(in srgb,var(--line) 68%,transparent);
border-radius:var(--radius-chip);
color:var(--muted);
background:color-mix(in srgb,var(--panel) 72%,transparent);
font-size:11px;
font-weight:800;
}
.pet-photo-action-picker select {
width:auto;
min-width:92px;
height:28px;
padding:0 26px 0 9px;
border-radius:var(--radius-chip);
font-size:12px;
}
.pet-photo-preview {
min-height:470px;
border:1px solid color-mix(in srgb,var(--gold) 30%,var(--line));
border-radius:var(--radius-card);
overflow:hidden;
background:var(--bg);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 44px rgba(0,0,0,.18);
}
.pet-photo-card-art {
position:relative;
min-height:470px;
overflow:hidden;
background:#9fd0a0;
}
.pet-photo-preview[data-scene='beach'] .pet-photo-card-art { background:#e2c190; }
.pet-photo-preview[data-scene='night'] .pet-photo-card-art { background:#2f2a5a; }
.pet-photo-preview[data-scene='cabin'] .pet-photo-card-art { background:#a18a63; }
.pet-photo-preview[data-scene='sky'] .pet-photo-card-art { background:#d6ecff; }
.pet-photo-scene-glow {
position:absolute;
inset:0;
pointer-events:none;
background:rgba(255,255,255,.08);
}
.pet-photo-preview[data-scene='night'] .pet-photo-scene-glow {
background:rgba(255,226,138,.08);
}
.pet-photo-sky {
position:absolute;
inset:26px 32px auto;
display:flex;
justify-content:space-between;
color:rgba(255,255,255,.82);
font-size:30px;
pointer-events:none;
}
.pet-photo-title {
position:absolute;
left:18px;
top:18px;
z-index:12;
display:flex;
flex-direction:column;
gap:2px;
max-width:min(420px,calc(100% - 36px));
padding:11px 13px;
border:1px solid rgba(255,255,255,.46);
border-radius:18px;
background:rgba(255,255,255,.72);
color:#2f2430;
box-shadow:0 12px 24px rgba(0,0,0,.12);
backdrop-filter:blur(10px);
}
.pet-photo-title strong { font-size:18px; }
.pet-photo-title span { color:rgba(47,36,48,.72); font-size:12px; font-weight:800; }
.pet-photo-scene-badge {
position:absolute;
right:18px;
top:22px;
z-index:12;
max-width:250px;
padding:8px 10px;
border:1px solid rgba(255,255,255,.42);
border-radius:var(--radius-chip);
background:rgba(47,36,48,.18);
color:rgba(255,255,255,.9);
font-size:11px;
font-weight:900;
text-align:right;
backdrop-filter:blur(10px);
}
.pet-photo-preview[data-scene='park'] .pet-photo-scene-badge,
.pet-photo-preview[data-scene='beach'] .pet-photo-scene-badge,
.pet-photo-preview[data-scene='cabin'] .pet-photo-scene-badge,
.pet-photo-preview[data-scene='sky'] .pet-photo-scene-badge {
background:rgba(255,255,255,.55);
color:rgba(47,36,48,.72);
}
.pet-photo-scenery { position:absolute; pointer-events:none; }
.pet-photo-tree { left:6%; bottom:24%; width:68px; height:92px; background:#865b35; border:4px solid #573d32; border-radius:8px; }
.pet-photo-tree::before { content:''; position:absolute; left:-30px; top:-58px; width:124px; height:86px; border:4px solid #32643a; border-radius:50% 50% 42% 42%; background:#68b96a; box-shadow:22px 18px 0 #83cc74; }
.pet-photo-sign { right:8%; top:36%; z-index:2; width:92px; padding:8px 6px; border:4px solid #573d32; border-radius:10px; background:#bd8650; color:#fff3c2; font-size:10px; font-weight:900; text-align:center; letter-spacing:.08em; }
.pet-photo-pond { left:9%; bottom:8%; width:144px; height:58px; border:4px solid #417589; border-radius:50%; background:#78c7e0; box-shadow:inset -24px -12px 0 #4e9fc2,inset 18px 10px 0 rgba(255,255,255,.34); }
.pet-photo-ground { position:absolute; left:50%; bottom:-70px; width:86%; height:210px; transform:translateX(-50%); border-radius:50% 50% 0 0; background:rgba(255,255,255,.28); pointer-events:none; }
.pet-photo-confetti {
position:absolute;
inset:0;
pointer-events:none;
}
.pet-photo-confetti span {
position:absolute;
width:8px;
height:8px;
border-radius:2px;
background:#fff7ad;
box-shadow:0 0 0 1px rgba(255,255,255,.24);
opacity:.72;
animation:pet-photo-float 3.2s ease-in-out infinite;
}
.pet-photo-confetti span:nth-child(1) { left:28%; top:23%; background:#ff8aa8; animation-delay:-.3s; }
.pet-photo-confetti span:nth-child(2) { left:54%; top:16%; background:#65a9ed; animation-delay:-1.1s; }
.pet-photo-confetti span:nth-child(3) { left:82%; top:31%; background:#fff7ad; animation-delay:-.7s; }
.pet-photo-confetti span:nth-child(4) { left:34%; top:78%; background:#a8ddaa; animation-delay:-1.7s; }
.pet-photo-confetti span:nth-child(5) { left:72%; top:70%; background:#ffcf6f; animation-delay:-2.2s; }
.pet-photo-pet {
position:absolute;
left:var(--x);
top:var(--y);
z-index:8;
width:156px;
transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(var(--s,1));
text-align:center;
filter:drop-shadow(0 12px 14px rgba(0,0,0,.18));
}
.pet-photo-pet-stage {
position:relative;
display:block;
width:156px;
height:128px;
margin:0 auto;
animation:pet-photo-breathe 2.6s ease-in-out infinite;
animation-delay:var(--d,0s);
}
.pet-photo-pet-stage .pet-plaza-sprite-stage {
position:absolute;
left:50%;
top:-8px;
width:220px;
height:190px;
transform:translateX(-50%) scale(.66);
transform-origin:top center;
}
.pet-photo-pet-stage::after { content:none; }
.pet-photo-pet[data-photo-action] .pet-photo-pet-stage { animation-name:pet-photo-breathe; animation-duration:3.4s; animation-timing-function:ease-in-out; }
.pet-photo-pet-name,
.pet-photo-pet-action {
display:inline-block;
max-width:138px;
padding:4px 9px;
border:1px solid rgba(255,255,255,.58);
border-radius:var(--radius-chip);
background:rgba(255,255,255,.74);
color:#2f2430;
font-size:12px;
font-weight:900;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
backdrop-filter:blur(8px);
}
.pet-photo-pet-action {
margin-top:3px;
color:#826474;
font-size:10px;
}
.pet-photo-footer {
position:absolute;
left:18px;
right:18px;
bottom:16px;
z-index:12;
color:rgba(47,36,48,.74);
font-size:12px;
font-weight:900;
text-align:right;
}
.pet-photo-actions {
display:flex;
justify-content:flex-end;
gap:8px;
flex-wrap:wrap;
}
.pwa-install-hero {
display:flex;
align-items:center;
gap:12px;
padding:18px;
border:1px solid color-mix(in srgb,var(--gold) 34%,var(--line));
border-radius:var(--radius-card);
background:var(--card);
}
.pwa-install-icon {
flex:0 0 68px;
width:68px;
height:68px;
display:grid;
place-items:center;
border-radius:var(--radius-card);
background:var(--card);
color:#8d4160;
font-size:28px;
font-weight:1000;
box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 12px 22px rgba(0,0,0,.14);
}
.pwa-install-hero div {
min-width:0;
display:flex;
flex-direction:column;
gap:3px;
}
.pwa-install-hero strong { color:var(--accent2); font-size:17px; }
.pwa-install-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.mcu-image-layout {
display:grid;
grid-template-columns:minmax(260px,0.8fr) minmax(300px,1.2fr);
gap:14px;
align-items:start;
}
.mcu-image-panel {
display:grid;
gap:10px;
padding:14px;
}
.mcu-delivery-options {
min-width:0;
margin:0;
padding:10px;
border:1px solid var(--line-soft);
border-radius:var(--radius-control);
background:color-mix(in srgb,var(--bg) 58%,transparent);
}
.mcu-delivery-options legend {
padding:0 5px;
color:var(--muted);
font-size:12px;
font-weight:800;
}
.mcu-delivery-choice-list {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
}
.mcu-delivery-choice {
min-width:0;
min-height:56px;
display:flex;
align-items:center;
gap:9px;
padding:8px 10px;
border:1px solid var(--line-soft);
border-radius:var(--radius-control);
background:color-mix(in srgb,var(--panel) 42%,transparent);
cursor:pointer;
}
.mcu-delivery-choice:has(input:checked) {
border-color:color-mix(in srgb,var(--accent2) 56%,var(--line));
background:color-mix(in srgb,var(--accent2) 10%,var(--bg));
}
.mcu-delivery-choice input {
flex:0 0 auto;
accent-color:var(--accent2);
}
.mcu-delivery-choice span {
min-width:0;
display:grid;
gap:2px;
}
.mcu-delivery-choice strong {
color:var(--text);
font-size:13px;
}
.mcu-delivery-choice small {
color:var(--muted);
font-size:11px;
line-height:1.35;
}
.mcu-bluetooth-panel {
min-width:0;
min-height:38px;
display:flex;
align-items:center;
gap:9px;
padding-top:8px;
}
.mcu-bluetooth-panel .msg,
.mcu-bluetooth-panel span {
min-width:0;
overflow-wrap:anywhere;
}
.mcu-image-options,
.mcu-image-tuning,
.mcu-image-actions,
.mcu-image-links {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
align-items:center;
}
.mcu-image-dither {
min-height:42px;
align-self:end;
padding:0 10px;
border:1px solid var(--line-soft);
border-radius:var(--radius-control);
background:color-mix(in srgb,var(--bg) 58%,transparent);
}
.mcu-image-tuning {
grid-template-columns:1fr;
}
.mcu-image-tuning label {
min-width:0;
display:grid;
gap:5px;
padding:9px 10px;
border:1px solid var(--line-soft);
border-radius:var(--radius-control);
background:color-mix(in srgb,var(--bg) 58%,transparent);
}
.mcu-image-tuning span {
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
color:var(--muted);
font-size:12px;
font-weight:800;
}
.mcu-image-tuning output {
min-width:34px;
color:var(--text);
text-align:right;
}
.mcu-image-tuning input[type="range"] {
width:100%;
min-width:0;
accent-color:var(--accent);
}
.mcu-image-preview-panel {
min-width:0;
padding:14px;
display:grid;
gap:10px;
}
.mcu-image-preview-panel canvas {
width:100%;
max-width:640px;
aspect-ratio:4 / 3;
justify-self:center;
display:block;
border:1px solid color-mix(in srgb,var(--accent2) 34%,var(--line));
border-radius:var(--radius-card);
background:#fff;
image-rendering:pixelated;
box-shadow:0 18px 38px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.18);
}
.mcu-image-stats {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
}
.mcu-image-stats span {
min-width:0;
padding:10px;
border:1px solid var(--line-soft);
border-radius:var(--radius-control);
background:color-mix(in srgb,var(--bg) 60%,transparent);
color:var(--muted);
text-align:center;
}
.mcu-image-stats strong {
display:block;
color:var(--text);
font-size:18px;
}
.mcu-image-endpoints {
padding:14px;
display:grid;
gap:10px;
}
.mcu-image-links {
grid-template-columns:repeat(3,minmax(0,1fr));
}
.mcu-image-links a {
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
}
.mcu-image-endpoint-text {
margin:0;
padding:12px;
border:1px solid var(--line-soft);
border-radius:var(--radius-control);
background:rgba(0,0,0,.18);
color:var(--text);
white-space:pre-wrap;
overflow-wrap:anywhere;
font-size:12px;
line-height:1.55;
}
@keyframes pet-photo-breathe {
0%,100% { transform:translateY(0) rotate(0deg); }
50% { transform:translateY(-7px) rotate(-1deg); }
}
@keyframes pet-photo-spark {
0%,100% { opacity:.72; transform:scale(.9) rotate(0deg); }
50% { opacity:1; transform:scale(1.16) rotate(12deg); }
}
@keyframes pet-photo-snooze {
0%,100% { opacity:.4; transform:translateY(4px) scale(.9); }
50% { opacity:1; transform:translateY(-4px) scale(1.08); }
}
@keyframes pet-photo-note {
0%,100% { transform:translateY(0) rotate(-8deg); }
50% { transform:translateY(-8px) rotate(10deg); }
}
@keyframes pet-photo-tail {
0%,100% { transform:rotate(-20deg); }
50% { transform:rotate(36deg); }
}
@keyframes pet-photo-float {
0%,100% { transform:translateY(0) rotate(0deg); }
50% { transform:translateY(-10px) rotate(18deg); }
}
@media (max-width:680px) {
.pet-photo-controls,
.pwa-install-grid,
.mcu-image-layout,
.mcu-delivery-choice-list,
.mcu-image-options,
.mcu-image-tuning,
.mcu-image-actions,
.mcu-image-links {
grid-template-columns:1fr;
}
.pet-photo-scene-badge {
left:18px;
right:18px;
top:82px;
max-width:none;
text-align:left;
}
.pet-photo-preview,
.pet-photo-card-art {
min-height:560px;
}
.pet-photo-pet {
width:136px;
}
}
/* ===== v2026.08.28-pet-photo-polish：合影场景与动作精修 ===== */
.pet-photo-preview {
min-height:500px;
border-color:color-mix(in srgb,var(--gold) 42%,var(--line));
box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 26px 56px rgba(32,22,36,.24);
}
.pet-photo-card-art {
min-height:500px;
isolation:isolate;
background:#9fd0a0;
}
.pet-photo-preview[data-scene='beach'] .pet-photo-card-art {
background:#d9c18e;
}
.pet-photo-preview[data-scene='night'] .pet-photo-card-art {
background:#2e2858;
}
.pet-photo-preview[data-scene='cabin'] .pet-photo-card-art {
background:#a68b63;
}
.pet-photo-preview[data-scene='sky'] .pet-photo-card-art {
background:#d8eef8;
}
.pet-photo-scene-glow {
z-index:0;
background:rgba(255,248,202,.08);
}
.pet-photo-orb,
.pet-photo-horizon,
.pet-photo-path,
.pet-photo-stars,
.pet-photo-sky,
.pet-photo-scenery {
position:absolute;
pointer-events:none;
}
.pet-photo-orb {
right:9%;
top:9%;
z-index:1;
width:76px;
height:76px;
border-radius:50%;
background:#ffd76d;
box-shadow:0 0 0 18px rgba(255,229,128,.18),0 18px 34px rgba(211,141,50,.18);
}
.pet-photo-preview[data-scene='night'] .pet-photo-orb {
background:#ffe58a;
box-shadow:0 0 0 18px rgba(255,226,138,.12),0 0 28px rgba(255,226,138,.38);
}
.pet-photo-preview[data-scene='night'] .pet-photo-orb::after {
content:'';
position:absolute;
right:-6px;
top:-7px;
width:76px;
height:76px;
border-radius:50%;
background:#242153;
}
.pet-photo-sky {
inset:70px 7% auto;
z-index:1;
height:92px;
}
.pet-photo-sky span {
position:absolute;
width:142px;
height:34px;
border-radius:50%;
background:rgba(255,255,255,.66);
box-shadow:36px -13px 0 4px rgba(255,255,255,.48),74px 6px 0 -2px rgba(255,255,255,.44);
}
.pet-photo-sky span:nth-child(1) { left:0; top:5px; transform:scale(.92); }
.pet-photo-sky span:nth-child(2) { left:45%; top:42px; transform:scale(.72); opacity:.62; }
.pet-photo-sky span:nth-child(3) { right:2%; top:18px; transform:scale(.78); opacity:.5; }
.pet-photo-stars {
inset:0;
z-index:2;
opacity:0;
}
.pet-photo-stars span {
position:absolute;
width:8px;
height:8px;
border-radius:50%;
background:#fff2a6;
box-shadow:0 0 16px rgba(255,242,166,.8);
}
.pet-photo-stars span:nth-child(1) { left:16%; top:15%; }
.pet-photo-stars span:nth-child(2) { left:28%; top:30%; transform:scale(.72); }
.pet-photo-stars span:nth-child(3) { left:54%; top:18%; transform:scale(.9); }
.pet-photo-stars span:nth-child(4) { left:76%; top:35%; transform:scale(.65); }
.pet-photo-stars span:nth-child(5) { left:91%; top:25%; transform:scale(.78); }
.pet-photo-preview[data-scene='night'] .pet-photo-stars,
.pet-photo-preview[data-scene='sky'] .pet-photo-stars { opacity:1; }
.pet-photo-preview[data-scene='night'] .pet-photo-sky span { background:rgba(255,230,151,.16); box-shadow:36px -13px 0 4px rgba(255,230,151,.1),74px 6px 0 -2px rgba(255,230,151,.09); }
.pet-photo-title {
z-index:18;
border-color:rgba(255,255,255,.62);
background:rgba(255,255,255,.82);
box-shadow:0 16px 34px rgba(37,26,43,.16),inset 0 1px 0 rgba(255,255,255,.72);
}
.pet-photo-preview[data-scene='night'] .pet-photo-title {
background:rgba(30,24,61,.72);
color:#fff5d0;
}
.pet-photo-preview[data-scene='night'] .pet-photo-title span { color:rgba(255,238,190,.78); }
.pet-photo-scene-badge {
z-index:18;
max-width:300px;
background:rgba(255,255,255,.62);
color:rgba(47,36,48,.74);
box-shadow:0 10px 22px rgba(37,26,43,.12);
}
.pet-photo-preview[data-scene='night'] .pet-photo-scene-badge {
background:rgba(255,226,138,.14);
color:rgba(255,246,213,.92);
}
.pet-photo-horizon {
left:-5%;
right:-5%;
top:50%;
z-index:2;
height:170px;
transform:translateY(-44%);
background:#78ca74;
border-radius:50% 50% 0 0;
}
.pet-photo-preview[data-scene='beach'] .pet-photo-horizon {
top:46%;
height:154px;
background:rgba(66,182,214,.56);
}
.pet-photo-preview[data-scene='night'] .pet-photo-horizon {
top:51%;
height:162px;
background:rgba(31,25,66,.70);
}
.pet-photo-preview[data-scene='cabin'] .pet-photo-horizon {
top:47%;
background:#6f8050;
}
.pet-photo-preview[data-scene='sky'] .pet-photo-horizon {
top:50%;
height:184px;
background:rgba(255,255,255,.62);
}
.pet-photo-prop-left {
left:6%;
bottom:24%;
z-index:4;
width:68px;
height:116px;
border:4px solid #573d32;
border-radius:16px 16px 9px 9px;
background:#865b35;
}
.pet-photo-prop-left::before {
content:'';
position:absolute;
left:-34px;
top:-68px;
width:136px;
height:92px;
border:4px solid #32643a;
border-radius:52% 48% 42% 44%;
background:#68b96a;
box-shadow:28px 24px 0 #83cc74;
}
.pet-photo-prop-right {
right:7%;
top:36%;
z-index:5;
width:112px;
min-height:54px;
display:grid;
place-items:center;
padding:9px 7px;
border:4px solid #573d32;
border-radius:13px;
background:#bd8650;
color:#fff3c2;
font-size:10px;
font-weight:1000;
text-align:center;
letter-spacing:.08em;
box-shadow:0 11px 0 rgba(87,61,50,.2);
}
.pet-photo-prop-front {
left:9%;
bottom:7%;
z-index:6;
width:168px;
height:64px;
border:4px solid #417589;
border-radius:50%;
background:#78c7e0;
box-shadow:inset -28px -12px 0 #4e9fc2,inset 20px 10px 0 rgba(255,255,255,.34);
}
.pet-photo-preview[data-scene='beach'] .pet-photo-prop-left {
left:9%;
bottom:22%;
width:28px;
height:150px;
border-color:#5f3d24;
border-radius:16px;
background:#8d6a3f;
transform:rotate(6deg);
}
.pet-photo-preview[data-scene='beach'] .pet-photo-prop-left::before {
left:-72px;
top:-52px;
width:158px;
height:76px;
border:0;
border-radius:50%;
background:#4fa860;
box-shadow:66px -18px 0 -12px #58bd69,34px 30px 0 -16px #3f9652;
transform:rotate(-20deg);
}
.pet-photo-preview[data-scene='beach'] .pet-photo-prop-right {
top:39%;
background:#f0c38d;
color:#5f3d24;
}
.pet-photo-preview[data-scene='beach'] .pet-photo-prop-front {
left:auto;
right:12%;
bottom:11%;
width:132px;
height:34px;
border-color:rgba(141,106,63,.34);
background:#f4c98a;
}
.pet-photo-preview[data-scene='night'] .pet-photo-prop-left {
left:12%;
bottom:29%;
width:86px;
height:76px;
border-color:#211938;
background:#2d244b;
}
.pet-photo-preview[data-scene='night'] .pet-photo-prop-left::before {
left:8px;
top:-64px;
width:42px;
height:56px;
border:0;
border-radius:var(--radius-card);
background:#ffcf6f;
box-shadow:72px 12px 0 #ff8aa8,144px -4px 0 #76d7ff;
}
.pet-photo-preview[data-scene='night'] .pet-photo-prop-right {
border-color:#211938;
background:#2c214e;
color:#ffe18a;
box-shadow:0 0 22px rgba(255,214,111,.2);
}
.pet-photo-preview[data-scene='night'] .pet-photo-prop-front {
left:8%;
width:170px;
border-color:rgba(255,226,138,.2);
background:rgba(60,44,88,.66);
}
.pet-photo-preview[data-scene='cabin'] .pet-photo-prop-left {
left:7%;
bottom:24%;
height:132px;
border-color:#3e432f;
background:#5f8e4f;
}
.pet-photo-preview[data-scene='cabin'] .pet-photo-prop-left::before {
left:-42px;
top:-88px;
width:142px;
height:112px;
border-color:#40572e;
border-radius:12px 12px 44% 44%;
background:#6f9f56;
transform:rotate(45deg);
}
.pet-photo-preview[data-scene='cabin'] .pet-photo-prop-right {
right:10%;
top:35%;
background:#8d5a35;
}
.pet-photo-preview[data-scene='cabin'] .pet-photo-prop-right::before {
content:'';
position:absolute;
left:14px;
top:100%;
width:84px;
height:34px;
background:#704827;
clip-path:polygon(50% 0,100% 100%,0 100%);
}
.pet-photo-preview[data-scene='cabin'] .pet-photo-prop-front {
background:#e0b36c;
border-color:#704827;
}
.pet-photo-preview[data-scene='sky'] .pet-photo-prop-left {
left:10%;
bottom:29%;
width:118px;
height:48px;
border:0;
border-radius:50%;
background:rgba(255,255,255,.84);
box-shadow:42px -16px 0 rgba(255,255,255,.68),86px 2px 0 rgba(255,255,255,.56);
}
.pet-photo-preview[data-scene='sky'] .pet-photo-prop-left::before {
display:none;
}
.pet-photo-preview[data-scene='sky'] .pet-photo-prop-right {
top:34%;
width:90px;
min-height:90px;
border-color:#4078be;
border-radius:50% 50% 46% 46%;
background:#cbd9ee;
color:#28405d;
}
.pet-photo-preview[data-scene='sky'] .pet-photo-prop-front {
width:160px;
border:0;
background:rgba(255,255,255,.8);
box-shadow:60px -18px 0 rgba(255,255,255,.58),126px 5px 0 rgba(255,255,255,.46);
}
.pet-photo-ground {
z-index:3;
bottom:-78px;
width:92%;
height:238px;
background:rgba(255,255,255,.26);
box-shadow:inset 0 30px 34px rgba(255,255,255,.18);
}
.pet-photo-path {
left:50%;
bottom:-22px;
z-index:4;
width:56%;
height:160px;
transform:translateX(-50%) perspective(260px) rotateX(52deg);
border-radius:50% 50% 0 0;
background:rgba(255,255,255,.20);
}
.pet-photo-preview[data-scene='beach'] .pet-photo-path { background:rgba(226,153,83,.18); }
.pet-photo-preview[data-scene='night'] .pet-photo-path { background:rgba(38,30,66,.18); }
.pet-photo-confetti span {
width:9px;
height:9px;
border-radius:50% 50% 50% 0;
opacity:.78;
animation-duration:3.6s;
}
.pet-photo-confetti span:nth-child(6) { left:14%; top:60%; background:#fff7ad; animation-delay:-1.4s; }
.pet-photo-confetti span:nth-child(7) { left:90%; top:64%; background:#76d7ff; animation-delay:-2.7s; }
.pet-photo-pet {
z-index:10;
width:164px;
cursor:grab;
touch-action:none;
user-select:none;
filter:drop-shadow(0 16px 16px rgba(40,28,36,.24));
transition:filter .16s ease;
}
.pet-photo-pet:focus-visible {
outline:3px solid rgba(255,216,77,.82);
outline-offset:6px;
border-radius:var(--radius-card);
}
.pet-photo-pet.dragging {
z-index:24;
cursor:grabbing;
filter:drop-shadow(0 26px 24px rgba(40,28,36,.34));
}
.pet-photo-pet.dragging .pet-photo-pet-stage {
animation:none;
transform:translateY(-5px) scale(1.04);
}
.pet-photo-drag-hint {
position:absolute;
right:18px;
bottom:40px;
z-index:18;
padding:6px 10px;
border:1px solid rgba(255,255,255,.46);
border-radius:var(--radius-chip);
background:rgba(255,255,255,.58);
color:rgba(47,36,48,.72);
font-size:11px;
font-weight:900;
backdrop-filter:blur(8px);
pointer-events:none;
}
.pet-photo-pet-stage {
width:164px;
height:142px;
transform-origin:50% 86%;
}
.pet-photo-pet-stage .pet-plaza-sprite-stage {
top:-13px;
transform:translateX(-50%) scale(.69);
}
.pet-photo-pet .pixel-pet {
transform-origin:50% 78%;
}
.pet-photo-pet-stage::before,
.pet-photo-pet-stage::after,
.pet-photo-action-fx,
.pet-photo-action-fx span,
.pet-photo-action-fx span::before {
position:absolute;
pointer-events:none;
}
.pet-photo-pet-stage::before,
.pet-photo-pet-stage::after {
content:none;
}
.pet-photo-action-fx {
inset:-38px -30px -8px;
z-index:15;
filter:drop-shadow(0 4px 8px rgba(38,27,35,.16));
}
.pet-photo-action-fx::after {
content:'';
position:absolute;
left:50%;
top:8px;
transform:translateX(-50%);
color:var(--fx,#fff2a5);
font-size:28px;
font-weight:1000;
text-shadow:0 4px 12px rgba(38,27,35,.2);
animation:pet-photo-fx-mark 1.7s ease-in-out infinite;
}
.pet-photo-action-fx span {
display:block;
width:9px;
height:9px;
border-radius:50%;
background:var(--fx,#fff2a5);
box-shadow:0 0 0 4px color-mix(in srgb,var(--fx,#fff2a5) 18%,transparent),0 0 18px var(--fx,#fff2a5);
opacity:.82;
animation:pet-photo-particle 2.4s ease-in-out infinite;
}
.pet-photo-action-fx span:nth-child(1) { left:18%; top:27%; animation-delay:-.2s; }
.pet-photo-action-fx span:nth-child(2) { left:68%; top:20%; width:12px; height:12px; background:var(--fx2,#ffffff); animation-delay:-.55s; }
.pet-photo-action-fx span:nth-child(3) { left:78%; top:58%; animation-delay:-.9s; }
.pet-photo-action-fx span:nth-child(4) { left:28%; top:66%; width:7px; height:7px; background:var(--fx2,#ffffff); animation-delay:-1.25s; }
.pet-photo-action-fx span:nth-child(5) { left:48%; top:7%; width:14px; height:14px; animation-delay:-1.6s; }
.pet-photo-action-fx span:nth-child(6) { left:8%; top:50%; width:8px; height:8px; background:var(--fx2,#ffffff); animation-delay:-1.95s; }
.pet-photo-pet[data-photo-action='idle'] { --fx:#ffe0b0; --fx2:#ffffff; }
.pet-photo-pet[data-photo-action='interact'] { --fx:#ff5f9a; --fx2:#ffb3c7; }
.pet-photo-pet[data-photo-action='play'] { --fx:#65b8ff; --fx2:#fff2a5; }
.pet-photo-pet[data-photo-action='feed'] { --fx:#f0b25b; --fx2:#fff0c6; }
.pet-photo-pet[data-photo-action='work'] { --fx:#9eeaff; --fx2:#ffffff; }
.pet-photo-pet[data-photo-action='upgrade'] { --fx:#ffe06a; --fx2:#ff8aa8; }
.pet-photo-pet[data-photo-action='wave'] { --fx:#ff8aa8; --fx2:#fff2a5; }
.pet-photo-pet[data-photo-action='nap'] { --fx:#7d88e8; --fx2:#dbe5ff; }
.pet-photo-pet[data-photo-action='dance'] { --fx:#7c83ff; --fx2:#ff7fa8; }
.pet-photo-pet[data-photo-action='guard'] { --fx:#ffd76d; --fx2:#9eeaff; }
.pet-photo-pet[data-photo-action='interact'] .pet-photo-action-fx::after { content:'♥'; }
.pet-photo-pet[data-photo-action='upgrade'] .pet-photo-action-fx::after { content:'✦'; }
.pet-photo-pet[data-photo-action='wave'] .pet-photo-action-fx::after { content:'⌁'; }
.pet-photo-pet[data-photo-action='nap'] .pet-photo-action-fx::after { content:'z'; }
.pet-photo-pet[data-photo-action='dance'] .pet-photo-action-fx::after { content:'♪'; }
.pet-photo-pet[data-photo-action='guard'] .pet-photo-action-fx::after { content:'◆'; }
.pet-photo-pet-name,
.pet-photo-pet-action {
z-index:20;
position:relative;
max-width:150px;
background:rgba(255,255,255,.82);
box-shadow:0 8px 14px rgba(36,24,32,.1);
}
.pet-photo-preview[data-scene='night'] .pet-photo-pet-name,
.pet-photo-preview[data-scene='night'] .pet-photo-pet-action {
border-color:rgba(255,226,138,.28);
background:rgba(31,25,66,.76);
color:#fff5d0;
}
.pet-photo-preview[data-scene='night'] .pet-photo-pet-action { color:rgba(255,238,190,.78); }
.pet-photo-footer {
z-index:18;
padding:0 4px;
color:rgba(47,36,48,.72);
text-shadow:0 1px 0 rgba(255,255,255,.54);
}
.pet-photo-preview[data-scene='night'] .pet-photo-footer {
color:rgba(255,238,190,.76);
text-shadow:0 1px 0 rgba(0,0,0,.28);
}
@keyframes pet-photo-particle {
0%,100% { opacity:.38; transform:translate3d(0,8px,0) scale(.72); }
50% { opacity:.96; transform:translate3d(0,-12px,0) scale(1.12); }
}
@keyframes pet-photo-fx-mark {
0%,100% { opacity:.46; transform:translate(-50%,8px) scale(.86); }
50% { opacity:1; transform:translate(-50%,-8px) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
.pet-photo-card-art *,
.pet-photo-pet,
.pet-photo-pet *,
.pet-photo-confetti span {
animation:none;
transition:none;
}
}
@media (max-width:680px) {
.pet-photo-preview,
.pet-photo-card-art { min-height:590px; }
.pet-photo-title { max-width:calc(100% - 36px); }
.pet-photo-scene-badge { top:86px; }
.pet-photo-horizon { top:47%; }
.pet-photo-prop-right {
right:14px;
top:29%;
transform:scale(.82);
transform-origin:top right;
}
.pet-photo-prop-left {
left:5%;
transform:scale(.82);
transform-origin:left bottom;
}
.pet-photo-prop-front { transform:scale(.78); transform-origin:left bottom; }
.pet-photo-pet {
width:138px;
transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(calc(var(--s,1) * .86));
}
.pet-photo-pet-stage { width:150px; height:132px; }
.pet-photo-pet-stage .pet-plaza-sprite-stage { transform:translateX(-50%) scale(.61); }
.pet-photo-pet-name,
.pet-photo-pet-action { max-width:126px; }
}
/* ===== v2026.08.28-uiux-max：全站体验动效增强层 ===== */
:root {
--motion-spring:cubic-bezier(.18,.89,.32,1.12);
--motion-fluid:cubic-bezier(.16,1,.3,1);
--motion-shadow:0 22px 54px rgba(0,0,0,.2);
--motion-ring:0 0 0 5px color-mix(in srgb,var(--section-tint, var(--accent2)) 18%,transparent);
}
html { scroll-behavior:smooth; }
.skip-link {
position:fixed;
left:max(12px, env(safe-area-inset-left));
top:max(10px, env(safe-area-inset-top));
z-index:999;
padding:10px 14px;
border:1px solid color-mix(in srgb,var(--accent2) 55%,var(--line));
border-radius:var(--radius-chip);
background:color-mix(in srgb,var(--card) 96%,transparent);
color:var(--text);
font-weight:900;
text-decoration:none;
box-shadow:var(--motion-shadow);
transform:translateY(-150%);
transition:transform .22s var(--motion-fluid), opacity .18s ease;
opacity:0;
}
.skip-link:focus {
transform:translateY(0);
opacity:1;
outline:none;
}
.experience-veil {
position:fixed;
inset:0;
z-index:0;
overflow:hidden;
pointer-events:none;
opacity:.82;
transition:opacity .35s ease;
}
.experience-veil::before {
content:'';
position:absolute;
inset:-26%;
background:rgba(var(--accent-rgb),.05);
filter:blur(18px) saturate(1.1);
transform:translate3d(-5%,0,0) rotate(.001deg);
}
.experience-progress {
position:fixed;
top:max(0px, env(safe-area-inset-top));
left:0;
width:100%;
height:3px;
border-radius:var(--radius-chip);
background:var(--card);
opacity:0;
transform:scaleX(.08);
transform-origin:left center;
box-shadow:0 0 18px color-mix(in srgb,var(--section-tint, var(--accent2)) 42%,transparent);
}
.app-busy .experience-progress {
opacity:.9;
animation:app-progress 1.25s var(--motion-fluid) infinite;
}
body.motion-ready::before {
animation:experience-grid-drift 22s linear infinite;
}
body.motion-ready:not(.app-busy)::after {
animation:experience-glow-breathe 8s ease-in-out infinite alternate;
}
body.motion-ready .experience-veil::before {
animation:experience-ribbon 18s ease-in-out infinite alternate;
}
body.motion-ready .hero {
animation:hero-stage-in .52s var(--motion-fluid) both;
}
body.motion-ready .hero h1 {
background:var(--card);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
letter-spacing:0;
}
body.motion-ready .motion-reveal {
opacity:0;
transform:translateY(14px) scale(.988);
filter:saturate(.94);
transition:
opacity .38s ease,
transform .46s var(--motion-fluid),
filter .42s ease;
transition-delay:calc(var(--reveal-i, 0) * 28ms);
}
body.motion-ready .motion-reveal.motion-visible {
opacity:1;
transform:none;
filter:none;
}
.home-zone-card,
.today-card,
.home-pulse-item,
.notification-item,
.changelog-day {
position:relative;
isolation:isolate;
overflow:hidden;
}
.home-zone-card::after,
.today-card::after,
.home-pulse-item::after,
.notification-item::after,
.changelog-day::after {
content:'';
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
opacity:0;
background:var(--card);
transition:opacity .2s ease;
}
.home-zone-card > *,
.today-card > *,
.home-pulse-item > *,
.notification-item > *,
.changelog-day > * {
position:relative;
z-index:1;
}
.home-zone-card.motion-hovering::after,
.today-card.motion-hovering::after,
.home-pulse-item.motion-hovering::after,
.notification-item.motion-hovering::after,
.changelog-day.motion-hovering::after {
opacity:1;
}
.home-zone-card.motion-hovering,
.today-card.motion-hovering,
.home-pulse-item.motion-hovering,
.notification-item.motion-hovering,
.row-item.motion-hovering,
.pet-shop-item.motion-hovering,
.pet-species-choice.motion-hovering,
.changelog-day.motion-hovering {
transform:translateY(-4px) scale(1.006);
box-shadow:var(--motion-shadow), var(--motion-ring), inset 0 1px 0 rgba(255,255,255,.06);
}
.home-zone-main.motion-hovering,
.tile.motion-hovering,
.app-nav-item.motion-hovering {
transform:translateY(-3px) scale(1.006);
box-shadow:0 16px 38px color-mix(in srgb,var(--section-tint, var(--accent2)) 16%,rgba(0,0,0,.16));
}
.motion-ripple {
position:relative;
isolation:isolate;
overflow:hidden;
}
.tap-ripple {
position:absolute;
z-index:0;
border-radius:var(--radius-chip);
pointer-events:none;
background:var(--card);
opacity:.72;
transform:translate(-50%,-50%) scale(0);
animation:tap-ripple .56s ease-out both;
}
.jiji-btn.motion-ripple {
overflow:visible;
}
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible {
outline:3px solid color-mix(in srgb,var(--section-tint, var(--accent2)) 72%,transparent);
outline-offset:3px;
box-shadow:var(--motion-ring), 0 0 0 1px color-mix(in srgb,var(--section-tint, var(--accent2)) 35%,transparent);
}
button:not(.jiji-hide-btn),
.tab,
.home-filter,
.home-zone-actions button,
.preview-jump,
.pet-tab,
.plaza-filter,
.app-nav-item {
min-height:44px;
}
.home-zone-actions button,
.home-filter,
.app-nav-item,
.tab {
transform-origin:center;
}
.theme-dot {
min-width:46px;
min-height:46px;
}
.home-search:focus-within,
.composer:focus-within,
.jiji-chat-form:focus-within,
.profile-form:focus-within {
border-color:color-mix(in srgb,var(--section-tint, var(--accent2)) 54%,var(--line));
box-shadow:var(--motion-ring), 0 14px 34px rgba(0,0,0,.13);
}
.home-zone-card:nth-child(odd) .home-zone-main {
animation-duration:7.8s;
}
body.motion-ready .home-zone-main {
animation:zone-breathe 8.4s ease-in-out infinite alternate;
}
body.motion-ready .today-card.urgent {
animation:urgent-breathe 1.75s ease-in-out infinite;
}
body.motion-ready .app-nav:not(.hidden) {
animation:nav-rise .34s var(--motion-fluid) both;
}
body.motion-ready .app-nav-item.active {
animation:nav-active-pulse 2.6s ease-in-out infinite;
}
body.motion-ready .jiji-bubble.show {
animation:bubble-pop .28s var(--motion-spring) both;
}
@keyframes hero-stage-in {
from { opacity:.001; transform:translateY(16px) scale(.986); filter:blur(6px) saturate(.92); }
68% { opacity:1; filter:blur(0) saturate(1.04); }
to { opacity:1; transform:none; filter:none; }
}
@keyframes experience-ribbon {
from { transform:translate3d(-6%,-1%,0) rotate(.001deg); opacity:.5; }
to { transform:translate3d(6%,2%,0) rotate(.001deg); opacity:.82; }
}
@keyframes experience-grid-drift {
from { background-position:0 0, 0 0; }
to { background-position:44px 44px, 44px 44px; }
}
@keyframes experience-glow-breathe {
from { opacity:.46; transform:translate3d(0,0,0) scale(.96); }
to { opacity:.84; transform:translate3d(-2vw,-1vh,0) scale(1.04); }
}
@keyframes app-progress {
0% { transform:translateX(-36%) scaleX(.16); }
50% { transform:translateX(28%) scaleX(.58); }
100% { transform:translateX(98%) scaleX(.16); }
}
@keyframes tap-ripple {
0% { transform:translate(-50%,-50%) scale(0); opacity:.72; }
100% { transform:translate(-50%,-50%) scale(1); opacity:0; }
}
@keyframes zone-breathe {
from { box-shadow:0 0 0 0 color-mix(in srgb,var(--zone-glow,var(--section-tint)) 0%,transparent); }
to { box-shadow:0 0 24px color-mix(in srgb,var(--zone-glow,var(--section-tint)) 10%,transparent); }
}
@keyframes urgent-breathe {
0%,100% { box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 16%,transparent), 0 10px 22px color-mix(in srgb,var(--gold) 10%,transparent); }
50% { box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 18%,transparent), 0 16px 32px color-mix(in srgb,var(--gold) 15%,transparent); }
}
@keyframes nav-rise {
from { opacity:.001; transform:translate3d(0, calc(var(--nav-rise-y, 0px) + 14px), 0) scale(.98); }
to { opacity:1; transform:translate3d(0, var(--nav-rise-y, 0px), 0) scale(1); }
}
@keyframes nav-active-pulse {
0%,100% { box-shadow:0 10px 24px color-mix(in srgb,var(--section-tint, var(--accent2)) 18%,transparent); }
50% { box-shadow:0 14px 34px color-mix(in srgb,var(--section-tint, var(--accent2)) 28%,transparent); }
}
@keyframes bubble-pop {
from { opacity:.001; transform:translateY(10px) scale(.94); }
to { opacity:1; transform:translateY(0) scale(1); }
}
@media (max-width:620px) {
.experience-veil { opacity:.58; }
.hero {
padding:20px 18px;
border-radius:var(--radius-card);
}
h1,
body.motion-ready .hero h1 {
max-width:8.2em;
font-size:clamp(34px, 10.3vw, 42px);
line-height:1.12;
word-break:keep-all;
overflow-wrap:normal;
text-wrap:balance;
}
.tabs {
gap:6px;
padding:5px;
}
.tab {
min-height:50px;
padding:0 6px;
display:flex;
align-items:center;
justify-content:center;
gap:3px;
font-size:14px;
line-height:1.14;
white-space:nowrap;
}
.theme-palette-toggle,
.theme-mode-btn {
font-size:12px;
line-height:1.1;
}
.home-zone-actions {
gap:7px;
}
.home-zone-actions button {
min-height:44px;
white-space:normal;
line-height:1.2;
}
.home-pulse-list {
grid-template-columns:1fr;
}
.home-pulse-item {
min-height:64px;
}
}
@media (hover:none), (pointer:coarse) {
.home-zone-card.motion-hovering,
.today-card.motion-hovering,
.home-pulse-item.motion-hovering,
.row-item.motion-hovering,
.pet-shop-item.motion-hovering,
.pet-species-choice.motion-hovering,
.changelog-day.motion-hovering,
.home-zone-main.motion-hovering,
.tile.motion-hovering,
.app-nav-item.motion-hovering {
transform:none;
}
}
@media (prefers-reduced-motion:reduce) {
html { scroll-behavior:auto; }
.experience-veil { display:none; }
.experience-progress,
.tap-ripple { display:none; }
body.motion-ready::before,
body.motion-ready::after,
body.motion-ready .hero,
body.motion-ready .home-zone-main,
body.motion-ready .today-card.urgent,
body.motion-ready .app-nav:not(.hidden),
body.motion-ready .app-nav-item.active,
body.motion-ready .jiji-bubble.show {
animation:none;
}
body.motion-ready .motion-reveal,
body.motion-ready .motion-reveal.motion-visible {
opacity:1;
transform:none;
filter:none;
transition:none;
}
}
/* ===== v2026.08.28-pet-photo-effects-v2：合影粒子动作与自由摆位 ===== */
.pet-photo-preview,
.pet-photo-card-art {
min-height:540px;
}
.pet-photo-card-art {
background:#9fd0a0;
}
.pet-photo-preview[data-scene='beach'] .pet-photo-card-art {
background:#d9c18e;
}
.pet-photo-preview[data-scene='night'] .pet-photo-card-art {
background:#2e2858;
}
.pet-photo-preview[data-scene='cabin'] .pet-photo-card-art {
background:#a68b63;
}
.pet-photo-preview[data-scene='sky'] .pet-photo-card-art {
background:#d8eef8;
}
.pet-photo-card-art::before,
.pet-photo-card-art::after {
content:'';
position:absolute;
inset:0;
pointer-events:none;
}
.pet-photo-card-art::before {
z-index:7;
background:rgba(255,255,255,.08);
mix-blend-mode:screen;
animation:pet-photo-light-sweep 8s ease-in-out infinite;
}
.pet-photo-card-art::after {
z-index:1;
background:transparent;
box-shadow:120px 70px 0 rgba(255,255,255,.14),260px 92px 0 rgba(255,255,255,.12),180px 230px 0 rgba(255,255,255,.10);
opacity:.8;
}
.pet-photo-ambient {
position:absolute;
inset:0;
pointer-events:none;
}
.pet-photo-ambient-back { z-index:3; }
.pet-photo-ambient-front { z-index:14; }
.pet-photo-ambient span {
position:absolute;
width:7px;
height:7px;
border-radius:50%;
background:rgba(255,255,255,.78);
box-shadow:0 0 18px rgba(255,255,255,.58);
opacity:.55;
animation:pet-photo-ambient-drift 7.2s ease-in-out infinite;
}
.pet-photo-ambient span:nth-child(1) { left:8%; top:24%; animation-delay:-.2s; }
.pet-photo-ambient span:nth-child(2) { left:18%; top:58%; width:12px; height:12px; background:#fff2a5; animation-delay:-1.4s; }
.pet-photo-ambient span:nth-child(3) { left:30%; top:18%; background:#ff9abc; animation-delay:-2.3s; }
.pet-photo-ambient span:nth-child(4) { left:42%; top:35%; width:10px; height:10px; background:#9eeaff; animation-delay:-3.2s; }
.pet-photo-ambient span:nth-child(5) { left:56%; top:72%; background:#fff; animation-delay:-4.1s; }
.pet-photo-ambient span:nth-child(6) { left:68%; top:20%; width:11px; height:11px; background:#ffd76d; animation-delay:-5.2s; }
.pet-photo-ambient span:nth-child(7) { left:82%; top:56%; background:#ff8aa8; animation-delay:-6s; }
.pet-photo-ambient span:nth-child(8) { left:91%; top:30%; width:10px; height:10px; background:#9eeaff; animation-delay:-.9s; }
.pet-photo-ambient span:nth-child(9) { left:12%; top:78%; background:#a8e6d0; animation-delay:-2.8s; }
.pet-photo-ambient span:nth-child(10) { left:74%; top:80%; width:12px; height:12px; background:#fff2a5; animation-delay:-4.8s; }
.pet-photo-ambient span:nth-child(11) { left:24%; top:42%; animation-delay:-6.6s; }
.pet-photo-ambient span:nth-child(12) { left:49%; top:16%; background:#ffffff; animation-delay:-1.8s; }
.pet-photo-ambient span:nth-child(13) { left:64%; top:48%; background:#ff9abc; animation-delay:-3.8s; }
.pet-photo-ambient span:nth-child(14) { left:88%; top:74%; background:#a8e6d0; animation-delay:-5.8s; }
.pet-photo-pet {
z-index:var(--z,10);
transform:translate(-50%,-50%) scale(var(--s,1));
transition:filter .16s ease, transform .16s ease;
}
.pet-photo-pet.active {
filter:drop-shadow(0 24px 24px rgba(40,28,36,.3));
}
.pet-photo-pet.active::before {
content:'';
position:absolute;
left:50%;
top:50%;
width:170px;
height:154px;
transform:translate(-50%,-56%);
border:2px solid rgba(255,216,77,.7);
border-radius:42% 58% 46% 54%;
box-shadow:0 0 0 6px rgba(255,216,77,.12);
pointer-events:none;
}
.pet-photo-pet.dragging {
transform:translate(-50%,-50%) scale(calc(var(--s,1) * 1.04));
}
.pet-photo-pet-stage,
.pet-photo-pet[data-photo-action] .pet-photo-pet-stage {
isolation:isolate;
animation:pet-photo-stage-float 4.4s ease-in-out infinite;
animation-delay:var(--d,0s);
}
.pet-photo-pet.dragging .pet-photo-pet-stage {
animation:none;
transform:translateY(-5px);
}
.pet-photo-pet .pixel-pet,
.pet-photo-pet[data-photo-action] .pixel-pet {
animation:none;
}
.pet-photo-pet .pet-pixel-image .pet-image-fallback {
font-size:94px;
}
.pet-photo-pet-stage .pet-plaza-sprite-stage {
z-index:5;
}
.pet-photo-soft-shadow {
position:absolute;
left:50%;
bottom:5px;
z-index:1;
width:126px;
height:24px;
transform:translateX(-50%);
border-radius:50%;
background:rgba(41,28,34,.18);
filter:blur(2px);
}
.pet-photo-action-ring,
.pet-photo-motion-trail,
.pet-photo-action-fx,
.pet-photo-action-fx span {
position:absolute;
pointer-events:none;
}
.pet-photo-action-ring {
left:50%;
top:55%;
z-index:2;
width:142px;
height:76px;
transform:translate(-50%,-50%);
border:3px solid color-mix(in srgb,var(--fx,#fff2a5) 78%,transparent);
border-radius:50%;
opacity:.55;
filter:drop-shadow(0 0 16px color-mix(in srgb,var(--fx,#fff2a5) 45%,transparent));
animation:pet-photo-ring-pulse 2.2s ease-in-out infinite;
}
.pet-photo-motion-trail {
left:50%;
top:54%;
z-index:2;
width:150px;
height:88px;
transform:translate(-50%,-50%);
border-radius:50%;
background:transparent;
opacity:.55;
animation:pet-photo-trail-spin 4.8s linear infinite;
}
.pet-photo-action-fx {
inset:-52px -44px -16px;
z-index:3;
filter:drop-shadow(0 4px 8px rgba(38,27,35,.12));
}
.pet-photo-action-fx::after {
z-index:8;
top:0;
font-size:28px;
}
.pet-photo-action-fx span {
width:7px;
height:7px;
border-radius:50%;
background:var(--fx,#fff2a5);
box-shadow:0 0 0 3px color-mix(in srgb,var(--fx,#fff2a5) 12%,transparent),0 0 14px var(--fx,#fff2a5);
opacity:.72;
animation:pet-photo-particle-v2 2.8s ease-in-out infinite;
}
.pet-photo-action-fx span:nth-child(1) { left:9%; top:37%; animation-delay:-.2s; }
.pet-photo-action-fx span:nth-child(2) { left:25%; top:12%; width:10px; height:10px; background:var(--fx2,#ffffff); animation-delay:-.55s; }
.pet-photo-action-fx span:nth-child(3) { left:55%; top:4%; animation-delay:-.9s; }
.pet-photo-action-fx span:nth-child(4) { left:77%; top:15%; width:10px; height:10px; background:var(--fx2,#ffffff); animation-delay:-1.25s; }
.pet-photo-action-fx span:nth-child(5) { left:90%; top:48%; width:7px; height:7px; animation-delay:-1.6s; }
.pet-photo-action-fx span:nth-child(6) { left:78%; top:78%; background:var(--fx2,#ffffff); animation-delay:-1.95s; }
.pet-photo-action-fx span:nth-child(7) { left:50%; top:90%; width:9px; height:9px; animation-delay:-2.25s; }
.pet-photo-action-fx span:nth-child(8) { left:21%; top:80%; width:7px; height:7px; background:var(--fx2,#ffffff); animation-delay:-2.55s; }
.pet-photo-action-fx span:nth-child(9) { left:5%; top:62%; width:9px; height:9px; animation-delay:-2.85s; }
.pet-photo-action-fx span:nth-child(10) { left:44%; top:30%; width:7px; height:7px; background:var(--fx2,#ffffff); animation-delay:-3.15s; }
.pet-photo-pet[data-photo-action='idle'] .pet-photo-action-fx::after { content:'·'; }
.pet-photo-pet[data-photo-action='play'] .pet-photo-action-fx::after { content:'●'; }
.pet-photo-pet[data-photo-action='feed'] .pet-photo-action-fx::after { content:'◒'; }
.pet-photo-pet[data-photo-action='work'] .pet-photo-action-fx::after { content:'▣'; }
.pet-photo-pet[data-photo-action='play'] .pet-photo-action-ring { border-style:dashed; animation-duration:1.25s; }
.pet-photo-pet[data-photo-action='interact'] .pet-photo-action-ring { width:154px; height:84px; border-color:rgba(255,95,154,.78); }
.pet-photo-pet[data-photo-action='feed'] .pet-photo-action-fx span { border-radius:50% 50% 50% 0; }
.pet-photo-pet[data-photo-action='work'] .pet-photo-action-fx span { border-radius:3px; animation-timing-function:steps(2,end); }
.pet-photo-pet[data-photo-action='upgrade'] .pet-photo-action-ring { width:164px; height:92px; border-style:double; animation-duration:1.35s; }
.pet-photo-pet[data-photo-action='wave'] .pet-photo-motion-trail { background:transparent; animation-duration:2.4s; }
.pet-photo-pet[data-photo-action='nap'] .pet-photo-action-ring { opacity:.32; animation-duration:3.8s; }
.pet-photo-pet[data-photo-action='nap'] .pet-photo-action-fx span { animation-duration:4.2s; }
.pet-photo-pet[data-photo-action='dance'] .pet-photo-action-ring { width:168px; height:92px; transform:translate(-50%,-50%) rotate(-8deg); animation-duration:1.1s; }
.pet-photo-pet[data-photo-action='guard'] .pet-photo-action-ring { width:150px; height:96px; border-radius:44% 44% 52% 52%; border-width:5px; }
.pet-photo-drag-hint {
bottom:42px;
background:rgba(255,255,255,.72);
}
.pet-photo-preview[data-scene='night'] .pet-photo-drag-hint {
background:rgba(31,25,66,.72);
color:rgba(255,246,213,.86);
border-color:rgba(255,226,138,.28);
}
@keyframes pet-photo-stage-float {
0%,100% { transform:translateY(0); }
50% { transform:translateY(-5px); }
}
@keyframes pet-photo-ring-pulse {
0%,100% { opacity:.34; transform:translate(-50%,-50%) scale(.92); }
50% { opacity:.78; transform:translate(-50%,-50%) scale(1.08); }
}
@keyframes pet-photo-trail-spin {
to { transform:translate(-50%,-50%) rotate(360deg); }
}
@keyframes pet-photo-particle-v2 {
0%,100% { opacity:.25; transform:translate3d(0,10px,0) scale(.72); }
50% { opacity:1; transform:translate3d(0,-16px,0) scale(1.14); }
}
@keyframes pet-photo-ambient-drift {
0%,100% { opacity:.28; transform:translate3d(0,10px,0) scale(.8); }
50% { opacity:.85; transform:translate3d(8px,-16px,0) scale(1.16); }
}
@keyframes pet-photo-light-sweep {
0%,100% { transform:translateX(-32%); opacity:.22; }
45%,55% { transform:translateX(30%); opacity:.7; }
}
@media (max-width:680px) {
.pet-photo-preview,
.pet-photo-card-art { min-height:610px; }
.pet-photo-pet {
transform:translate(-50%,-50%) scale(calc(var(--s,1) * .86));
}
.pet-photo-pet.dragging {
transform:translate(-50%,-50%) scale(calc(var(--s,1) * .9));
}
.pet-photo-pet.active::before {
width:148px;
height:136px;
}
.pet-photo-action-fx { inset:-46px -34px -12px; }
.pet-photo-action-ring { width:122px; height:68px; }
.pet-photo-motion-trail { width:130px; height:78px; }
}
/* ===== v2026.08.31 warm tavern integrated motion layer ===== */
html {
background:var(--bg);
scroll-behavior:smooth;
transition:background-color 400ms var(--ease-in-out), color 400ms var(--ease-in-out);
}
body {
min-height:100dvh;
color:var(--text);
font-family:var(--font-body);
font-size:1rem;
line-height:1.68;
background:var(--bg);
letter-spacing:0;
transition:background-color 400ms var(--ease-in-out), color 400ms var(--ease-in-out);
}
body::before {
content:'';
position:fixed;
inset:0;
z-index:-2;
pointer-events:none;
opacity:.07;
background-image:
linear-gradient(90deg, rgba(var(--accent2-rgb),.045) 0 1px, transparent 1px 54px),
linear-gradient(180deg, rgba(var(--accent-rgb),.025) 0 1px, transparent 1px 42px),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
background-size:220px 220px, 180px 180px, 160px 160px;
mask-image:none;
}
body::after {
content:'';
position:fixed;
right:-14vw;
bottom:-18vw;
z-index:-1;
width:min(46vw,620px);
height:min(46vw,620px);
border-radius:50%;
pointer-events:none;
background:var(--bg-glow);
opacity:.34;
filter:blur(84px);
transform:translate3d(0,0,0) scale(1);
animation:tavern-glow 10s var(--ease-in-out) infinite;
}
@keyframes tavern-glow {
0%,100% { transform:translate3d(0,0,0) scale(1); opacity:.72; }
50% { transform:translate3d(-18px,-14px,0) scale(1.055); opacity:1; }
}
.scroll-progress {
position:fixed;
inset:0 auto auto 0;
z-index:9999;
width:100%;
height:2px;
pointer-events:none;
background:var(--accent);
transform:scaleX(0);
transform-origin:left center;
}
@supports (animation-timeline: scroll()) {
.scroll-progress {
animation:scroll-progress-scale linear both;
animation-timeline:scroll(root block);
}
}
@keyframes scroll-progress-scale {
from { transform:scaleX(0); }
to { transform:scaleX(1); }
}
.app {
width:min(1200px,100%);
padding:32px 24px max(40px,env(safe-area-inset-bottom));
}
h1,h2,h3,
.login-head h2,
.home-top h2,
.tile strong,
.home-zone-main strong,
.today-hub-head strong {
font-family:var(--font-display);
font-weight:700;
line-height:1.3;
letter-spacing:-.015em;
}
h1 {
font-size:clamp(1.75rem,4.2vw,2.25rem);
}
h2,
.login-head h2,
.home-top h2 {
font-size:clamp(1.35rem,3vw,1.5rem);
}
.muted,
.small-text,
.login-sub,
.sub,
.tile span,
.home-zone-main em,
.today-card em {
color:var(--muted);
}
.site-stats,
.site-stat strong,
.home-coin-badge,
.badge,
.changelog-date,
.version-card-main strong,
.code,
.snake-stats,
.tank-stats,
.lb-rank,
.game-save-main em {
font-family:var(--font-number);
font-variant-numeric:tabular-nums;
}
.hero {
position:relative;
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:24px;
margin:8px 0 24px;
padding:0 0 18px;
border:0;
border-bottom:1px solid var(--line);
border-radius:0;
background:transparent;
box-shadow:none;
overflow:visible;
backdrop-filter:none;
}
.hero::after { content:none; }
.eyebrow {
color:var(--accent);
font-size:.75rem;
font-weight:700;
letter-spacing:.12em;
}
.sub {
max-width:42rem;
font-size:.9375rem;
}
.home-zone-actions button::after,
.changelog-btn::after,
a:not(.skip-link)::after {
content:'';
position:absolute;
left:0;
right:0;
bottom:-2px;
height:1px;
background:var(--accent);
transform:scaleX(0);
transform-origin:left center;
transition:transform 200ms var(--ease-out);
}
.home-zone-actions button:hover::after,
.changelog-btn:hover::after,
a:not(.skip-link):hover::after {
transform:scaleX(1);
}.card,
.profile-overview,
.gomoku-stage-head,
.gomoku-create,
.status-item,
.site-settings,
.pet-plaza-detail,
.profile-card-preview,
.custom-pet-card,
.pet-action-row,
.pet-owned-row,
.row-item,
.plaza-post,
.announce-block,
.changelog-panel,
.pet-pane,
.pet-hero,
.today-hub,
.home-zone-card,
.home-jiji-guide,
.home-top,
.pet-stage,
.draw-stage,
.gomoku-board-wrap,
.snake-screen,
.tank-screen,
.pet-plaza-field{
border-radius:var(--radius-card);
border:1px solid var(--line);
background:var(--card);
box-shadow:0 14px 38px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.025);
backdrop-filter:none;
transition:background-color 400ms var(--ease-in-out), color 400ms var(--ease-in-out), border-color 400ms var(--ease-in-out), box-shadow 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.admin-panel{
border-radius:var(--radius-card);
border:1px solid var(--admin-line);
background:var(--admin-card);
box-shadow:0 14px 38px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.025);
backdrop-filter:none;
transition:background-color 400ms var(--ease-in-out), color 400ms var(--ease-in-out), border-color 400ms var(--ease-in-out), box-shadow 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.card:hover,
.home-zone-card:hover,
.today-card:hover,
.tile:hover,
.row-item:hover {
border-color:rgba(var(--accent-rgb),.42);
}
.login-card,
.home-card {
padding:24px;
}
.login-card {
max-width:400px;
margin:0 auto;
}
button,
.button,
.ghost,
.small,
input,
textarea,
select {
border-radius:var(--radius-control);
}
button {
display:inline-flex;
align-items:center;
justify-content:center;
gap:.45em;
position:relative;
isolation:isolate;
overflow:hidden;
min-height:44px;
padding:0 18px;
border:1px solid transparent;
box-shadow:none;
font-family:var(--font-body);
font-weight:700;
line-height:1.1;
text-align:center;
transition:background-color 250ms var(--ease-out), color 250ms var(--ease-out), border-color 250ms var(--ease-out), transform 200ms var(--ease-out), filter 200ms var(--ease-out), opacity 200ms var(--ease-out);
}
button.primary,
button:not(:is(.ghost,.tab,.home-filter,.app-nav-item,.theme-dot,.jiji-btn,.jiji-hide-btn,.tile,.today-card,.newcomer-step,.home-zone-main,.pet-home-status,.pet-space-action,.dm-contact,.draw-select,.pet-plaza-resident,.weekly-reward-card,.cookie-row,.kana-choice,.gomoku-cell)) {
background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 88%,#ffffff 12%), var(--accent));
color:var(--on-accent);
border-color:var(--accent);
}
button.primary::before,
button:not(:is(.ghost,.tab,.home-filter,.app-nav-item,.theme-dot,.jiji-btn,.jiji-hide-btn,.tile,.today-card,.newcomer-step,.home-zone-main,.pet-home-status,.pet-space-action,.dm-contact,.draw-select,.pet-plaza-resident,.weekly-reward-card,.cookie-row,.kana-choice,.gomoku-cell))::before {
content:none;
}
button.primary:hover::before,
button:not(:is(.ghost,.tab,.home-filter,.app-nav-item,.theme-dot,.jiji-btn,.jiji-hide-btn,.tile,.today-card,.newcomer-step,.home-zone-main,.pet-home-status,.pet-space-action,.dm-contact,.draw-select,.pet-plaza-resident,.weekly-reward-card,.cookie-row,.kana-choice,.gomoku-cell)):hover::before {
content:none;
}
button > * {
position:relative;
z-index:1;
}
button:hover:not(:disabled) {
transform:translateY(-1px);
filter:none;
}
button.primary:hover:not(:disabled),
button:not(:is(.ghost,.tab,.home-filter,.app-nav-item,.theme-dot,.jiji-btn,.jiji-hide-btn,.tile,.today-card,.newcomer-step,.home-zone-main,.pet-home-status,.pet-space-action,.dm-contact,.draw-select,.pet-plaza-resident,.weekly-reward-card,.cookie-row,.kana-choice,.gomoku-cell)):hover:not(:disabled) {
color:var(--on-accent);
border-color:color-mix(in srgb,var(--accent) 74%,var(--accent2));
background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 76%,var(--accent2) 24%), var(--accent));
box-shadow:0 10px 22px color-mix(in srgb,var(--accent) 18%,rgba(0,0,0,.18));
}
button:active:not(:disabled) {
transform:translateY(0) scale(.98);
}
button.primary:active:not(:disabled),
button:not(:is(.ghost,.tab,.home-filter,.app-nav-item,.theme-dot,.jiji-btn,.jiji-hide-btn,.tile,.today-card,.newcomer-step,.home-zone-main,.pet-home-status,.pet-space-action,.dm-contact,.draw-select,.pet-plaza-resident,.weekly-reward-card,.cookie-row,.kana-choice,.gomoku-cell)):active:not(:disabled) {
color:var(--on-accent);
}
.tile,
.pet-home-status,
.pet-space-action,
.dm-contact,
.draw-select,
.pet-plaza-resident,
button.cookie-row,
.kana-choice {
display:flex;
}
.home-pulse-item,
.notification-item,
.weekly-reward-card {
display:grid;
}
.tile {
flex-direction:column;
align-items:flex-start;
justify-content:space-between;
}
.ghost,
button.ghost,
.small.ghost {
color:var(--accent);
background:transparent;
border:1px solid var(--line);
}
.ghost:hover:not(:disabled),
button.ghost:hover:not(:disabled),
.small.ghost:hover:not(:disabled) {
color:var(--text);
border-color:rgba(var(--accent-rgb),.42);
background:color-mix(in srgb,var(--accent) 12%,var(--card));
box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 10%,transparent);
filter:none;
}
.small,
button.small,
.ghost.small,
.theme-palette-toggle,
.theme-mode-btn,
.changelog-btn,
.row-item-actions button,
.plaza-actions button,
.feedback-read-row button,
.health-actions button,
.snake-leaderboard-head button,
.gomoku-actions button,
.draw-bar button {
min-height:44px;
padding:0 12px;
align-items:center;
justify-content:center;
line-height:1;
font-size:.8125rem;
}
.theme-palette-toggle,
.theme-mode-btn,
.changelog-btn,
.home-filter,
.tab,
.pet-tab,
.plaza-filter,
.admin-work-tab,
.app-nav-item {
display:inline-flex;
align-items:center;
justify-content:center;
line-height:1;
}
.app-nav-item {
flex-direction:column;
gap:2px;
}
input,
textarea,
select {
min-height:44px;
border:1px solid var(--line);
background:rgba(var(--card-rgb),.42);
color:var(--text);
font:inherit;
font-size:1rem;
transition:border-color 300ms var(--ease-out), box-shadow 300ms var(--ease-out), background-color 300ms var(--ease-out);
}
input:focus,
textarea:focus,
select:focus {
border-color:var(--accent);
box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12);
}
.field-label {
color:var(--muted);
transition:color 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.field-label:has(+ input:focus),
.field-label:has(+ textarea:focus) {
color:var(--accent);
transform:translateY(-1px);
}.tabs,
.pet-tabs{
gap:18px;
padding:0;
border:0;
border-bottom:1px solid var(--line);
border-radius:0;
background:transparent;
}
.admin-work-tabs{
gap:18px;
padding:0;
border:0;
border-bottom:1px solid var(--admin-line);
border-radius:0;
background:transparent;
}.tab,
.pet-tab,
.home-filter,
.plaza-filter{
min-height:44px;
padding:0 2px;
border:0;
border-bottom:2px solid transparent;
border-radius:0;
background:transparent;
color:var(--muted);
box-shadow:none;
}
.admin-work-tab{
min-height:44px;
padding:0 2px;
border:0;
border-bottom:2px solid transparent;
border-radius:0;
background:transparent;
color:var(--admin-muted);
box-shadow:none;
}.tab.active,
.pet-tab.active,
.home-filter.active,
.plaza-filter.active{
color:var(--accent);
border-bottom-color:var(--accent);
background:transparent;
}
.admin-work-tab.active{
color:var(--admin-accent);
border-bottom-color:var(--admin-accent);
background:transparent;
}.tab:hover:not(.active):not(:disabled),
.pet-tab:hover:not(.active):not(:disabled),
.home-filter:hover:not(.active):not(:disabled),
.plaza-filter:hover:not(.active):not(:disabled){
color:var(--text);
border-bottom-color:rgba(var(--accent-rgb),.42);
background:color-mix(in srgb,var(--accent) 8%,transparent);
filter:none;
}
.admin-work-tab:hover:not(.active):not(:disabled){
color:var(--admin-text);
border-bottom-color:rgba(var(--admin-accent-rgb),.42);
background:color-mix(in srgb,var(--admin-accent) 8%,transparent);
filter:none;
}
.theme-switch {
align-items:flex-end;
gap:8px;
padding:10px;
border:1px solid var(--line);
border-radius:var(--radius-card);
background:var(--card);
}
.theme-switch-label {
color:var(--muted);
text-transform:none;
}
.theme-palette-toggle,
.theme-mode-btn {
min-height:44px;
border-radius:var(--radius-control);
}
.theme-swatches {
gap:10px;
border-radius:var(--radius-card);
background:var(--card);
box-shadow:none;
}
.theme-switch.open .theme-swatches,
.theme-switch.hover-open .theme-swatches {
border-color:var(--line);
}
.theme-dot {
width:46px;
height:46px;
min-width:46px;
min-height:46px;
padding:0;
border-radius:var(--radius-control);
border:1px solid transparent;
}
.theme-dot.active {
transform:none;
border-color:color-mix(in srgb,var(--text) 32%,transparent);
box-shadow:none;
}
.home-top {
padding:16px;
margin-bottom:16px;
}
.home-coin-badge,
.badge,
.site-stat,
.pill {
border-radius:var(--radius-chip);
border:1px solid var(--line);
background:rgba(var(--accent-rgb),.08);
color:var(--text);
}
.site-stats {
gap:8px;
border-radius:var(--radius-control);
background:transparent;
border:0;
font-family:var(--font-mono);
}
.site-stat {
padding:0;
border:0;
background:transparent;
color:var(--muted);
backdrop-filter:none;
}
#onlineStat:not(.hidden) + #registeredStat:not(.hidden)::before {
content:'·';
margin-right:8px;
color:var(--muted);
}
.home-tools {
grid-template-columns:minmax(220px,1fr) auto;
}
.home-search {
border-radius:var(--radius-control);
background:var(--card);
}
.home-search:focus-within {
border-color:var(--accent);
box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12);
}
.home-search span {
color:var(--accent);
}
.home-filters {
gap:14px;
padding:0;
border:0;
background:transparent;
}
.today-hub {
padding:16px;
margin-bottom:16px;
}
.today-hub-list {
display:grid;
grid-template-columns:1fr;
gap:8px;
}
.today-card {
display:grid;
grid-template-columns:28px 1fr;
align-items:center;
min-height:56px;
text-align:left;
border-radius:var(--radius-card);
background:var(--card);
border:1px solid var(--line);
}
.today-card span {
width:14px;
height:14px;
border-radius:4px;
color:transparent;
background:var(--accent);
}
.today-card strong,
.today-card em {
grid-column:2;
}
.home-jiji-guide {
display:grid;
grid-template-columns:48px 1fr;
gap:12px;
text-align:left;
margin:0 0 18px;
padding:12px;
}
.home-jiji-guide img {
width:48px;
height:48px;
animation:jiji-breathe 3s var(--ease-in-out) infinite;
}
.home-jiji-guide span {
position:relative;
border:1px solid var(--line);
border-radius:var(--radius-card);
padding:10px 12px;
background:rgba(var(--accent-rgb),.06);
}
.home-zone-card,
.today-card,
.tile {
transform-style:preserve-3d;
perspective:800px;
}
.home-planet-grid {
display:grid;
grid-template-columns:1fr;
gap:12px;
}
.home-zone-card,
.home-zone-card:nth-child(1),
.home-zone-card:nth-child(2) {
grid-column:auto;
min-width:0;
}
.home-zone-grid .tile,
.home-zone-grid .tile-feature {
grid-column:auto;
}
.home-zone-card::after,
.today-card::after,
.tile::after {
content:'';
position:absolute;
inset:0;
pointer-events:none;
border-radius:inherit;
opacity:0;
background:rgba(255,255,255,.045);
transition:opacity 220ms var(--ease-out);
}
.home-zone-card.is-tilting,
.today-card.is-tilting,
.tile.is-tilting {
transform:translateY(-2px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
}
.home-zone-card.is-tilting::after,
.today-card.is-tilting::after,
.tile.is-tilting::after,
.home-zone-card.motion-hovering::after,
.today-card.motion-hovering::after,
.tile.motion-hovering::after {
opacity:1;
}
.home-zone-main,
.home-zone-actions button,
.tile {
text-align:left;
}
.home-zone-main {
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:flex-end;
gap:5px;
color:var(--text);
background:transparent;
border:0;
box-shadow:none;
}
.home-zone-actions button {
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
color:color-mix(in srgb,var(--text) 88%,var(--zone-glow,var(--section-tint)) 12%);
background:color-mix(in srgb,var(--zone-glow,var(--section-tint)) 7%,transparent);
border:1px solid color-mix(in srgb,var(--zone-glow,var(--section-tint)) 22%,var(--line-soft));
min-height:44px;
padding:0 12px;
box-shadow:none;
line-height:1;
}
.home-zone-main:hover:not(:disabled) {
color:var(--text);
}
.home-zone-actions button:hover:not(:disabled) {
color:var(--text);
background:color-mix(in srgb,var(--zone-glow,var(--section-tint)) 13%,transparent);
border-color:color-mix(in srgb,var(--zone-glow,var(--section-tint)) 44%,var(--line));
filter:none;
}
.tiles {
grid-template-columns:repeat(3,minmax(0,1fr));
gap:20px;
}
.tile {
min-height:118px;
padding:16px;
border-radius:var(--radius-card);
background:var(--card);
border:1px solid var(--line);
}.tile::before,
#profileBtn::before,
#petBtn::before,
#roomBtn::before,
#aiBtn::before,
#drawGameBtn::before,
#gomokuBtn::before,
#snakeGameBtn::before,
#cookieGameBtn::before,
#tankGameBtn::before,
#statusBtn::before,
#messagesBtn::before,
#fortuneBtn::before,
#checkinBtn::before,
#petPlazaBtn::before,
#feedbackBtn::before,
#mcuImageBtn::before{
content:'';
display:block;
width:14px;
height:14px;
margin:0 0 10px;
border-radius:4px;
background:var(--accent);
box-shadow:0 0 0 3px rgba(var(--accent-rgb),.08);
}
#adminBtn::before{
content:'';
display:block;
width:14px;
height:14px;
margin:0 0 10px;
border-radius:4px;
background:var(--admin-accent);
box-shadow:0 0 0 3px rgba(var(--admin-accent-rgb),.08);
}
.tile strong {
padding-right:0;
font-size:1.125rem;
transition:color 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.tile:hover strong,
.home-zone-card:hover .home-zone-main strong {
color:var(--accent);
transform:translateY(-2px);
}
.messages,
.plaza-list,
.dm-thread-messages {
background:transparent;
}
.bubble,
.dm-message-bubble,
.plaza-post {
border:1px solid var(--line);
border-radius:var(--radius-card);
background:var(--card);
}
.bubble.user,
.dm-message.mine .dm-message-bubble {
border-color:rgba(var(--accent-rgb),.42);
background:rgba(var(--accent-rgb),.10);
color:var(--text);
}
.composer {
border-top:1px solid var(--line);
background:var(--card);
}
.app-footer {
margin:24px auto 0;
padding:12px 0 0;
border-top:1px solid var(--line);
color:var(--muted);
font-size:.8125rem;
text-align:center;
}
.app-nav {
--nav-rise-y:0px;
--nav-indicator-x:0px;
--nav-indicator-y:0px;
--nav-indicator-w:25%;
--nav-indicator-h:44px;
position:fixed;
z-index:80;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:0;
padding:0 max(8px,env(safe-area-inset-right)) max(0px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
border:1px solid var(--line);
border-radius:0;
background:color-mix(in srgb,var(--card) 94%,transparent);
box-shadow:0 -12px 32px rgba(0,0,0,.22);
backdrop-filter:blur(14px);
}
.app-nav.hidden {
display:none;
}
.guest-login-btn {
position:fixed;
left:max(16px, env(safe-area-inset-left));
right:auto;
bottom:max(16px, env(safe-area-inset-bottom));
z-index:85;
min-height:44px;
padding:0 16px;
border-radius:var(--radius-chip);
border:1px solid color-mix(in srgb,var(--accent2) 55%,var(--line));
background:color-mix(in srgb,var(--card) 88%,var(--accent2));
color:var(--text);
box-shadow:0 18px 46px rgba(0,0,0,.28), 0 0 18px color-mix(in srgb,var(--accent2) 18%,transparent);
}
.guest-login-btn.hidden,
body.guest-readonly .guest-login-btn {
display:none !important;
}
.app-nav-indicator {
position:absolute;
z-index:0;
left:0;
top:0;
width:var(--nav-indicator-w);
height:2px;
border-radius:var(--radius-chip);
background:var(--accent);
transform:translate3d(var(--nav-indicator-x),0,0);
transition:transform 300ms var(--ease-out), width 300ms var(--ease-out), height 300ms var(--ease-out);
pointer-events:none;
}
.app-nav-item {
z-index:1;
display:inline-flex;
align-items:center;
justify-content:center;
flex-direction:column;
gap:2px;
min-height:56px;
padding:6px 8px;
border:0;
border-radius:0;
background:transparent;
color:var(--muted);
box-shadow:none;
}
.app-nav-item span {
display:none;
}
.app-nav-item strong {
font-size:.8125rem;
font-weight:700;
line-height:1;
}
.app-nav-item:hover:not(:disabled) {
color:var(--text);
background:color-mix(in srgb,var(--accent) 8%,transparent);
filter:none;
}
.app-nav-item.active {
color:var(--text);
background:transparent;
}
.jiji-mascot {
filter:drop-shadow(0 0 18px rgba(var(--accent-rgb),.22));
}
.jiji-btn img {
animation:jiji-breathe 3s var(--ease-in-out) infinite, jiji-float 4s var(--ease-in-out) infinite;
}
.jiji-btn:active img {
animation:jiji-click 300ms var(--ease-spring);
}
@keyframes jiji-breathe {
0%,100% { transform:scale(1); }
50% { transform:scale(1.025); }
}
@keyframes jiji-float {
0%,100% { translate:0 0; }
50% { translate:0 -5px; }
}
@keyframes jiji-click {
0% { transform:scale(.92); }
100% { transform:scale(1); }
}
body.motion-ready .hero h1,
body.motion-ready [data-split-title] {
background:none;
-webkit-background-clip:border-box;
background-clip:border-box;
color:var(--text);
}
body.motion-ready [data-split-title] .split-char,
[data-split-title] .split-char {
color:var(--text);
-webkit-text-fill-color:var(--text);
}
.login-head [data-split-title] .split-char {
color:var(--text);
}
.split-char {
display:inline-block;
opacity:0;
transform:translateY(8px);
animation:split-title-in 500ms var(--ease-out) forwards;
animation-delay:calc(var(--char-i) * 30ms + 120ms);
}
.split-space {
display:inline;
white-space:pre;
}
@keyframes split-title-in {
to { opacity:1; transform:translateY(0); }
}
.experience-veil {
position:fixed;
inset:0;
z-index:9998;
pointer-events:none;
background:var(--bg);
clip-path:circle(0% at 92% 92%);
animation:tavern-veil 800ms var(--ease-out) 80ms forwards;
}
.experience-progress {
display:none;
}
@keyframes tavern-veil {
to { clip-path:circle(150% at 92% 92%); opacity:0; visibility:hidden; }
}
.motion-reveal {
opacity:0;
transform:translateY(24px);
transition:opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
transition-delay:calc(var(--reveal-i,0) * 60ms);
}
.motion-reveal.motion-visible,
.motion-visible > .motion-reveal {
opacity:1;
transform:translateY(0);
}
.card-entering {
animation:card-section-in 320ms var(--ease-out);
}
@keyframes card-section-in {
from { opacity:.001; transform:translateX(12px); }
to { opacity:1; transform:translateX(0); }
}
#loginBtn.is-loading {
pointer-events:none;
}
#loginBtn.is-loading::after {
content:'';
display:inline-block;
width:5px;
height:5px;
margin-left:8px;
border-radius:50%;
background:currentColor;
box-shadow:8px 0 0 currentColor,16px 0 0 currentColor;
animation:login-dots 900ms var(--ease-in-out) infinite;
}
@keyframes login-dots {
0%,100% { opacity:.35; transform:translateY(0); }
50% { opacity:1; transform:translateY(-2px); }
}
.auth-shake {
animation:auth-shake 300ms var(--ease-out);
}
@keyframes auth-shake {
0%,100% { transform:translateX(0); }
20% { transform:translateX(-6px); }
40% { transform:translateX(6px); }
60% { transform:translateX(-4px); }
80% { transform:translateX(4px); }
}
#loginMsg:not(:empty) {
display:block;
border:1px solid var(--line);
border-radius:var(--radius-control);
padding:8px 10px;
background:rgba(var(--accent-rgb),.08);
color:var(--text);
animation:msg-slide 260ms var(--ease-out);
}
#loginMsg.error {
border-color:rgba(220,90,110,.46);
background:rgba(220,90,110,.10);
color:#f1a0ad;
}
@keyframes msg-slide {
from { opacity:.001; transform:translateY(-8px); }
to { opacity:1; transform:translateY(0); }
}
.number-counting {
font-variant-numeric:tabular-nums;
}
.theme-ripple {
position:fixed;
inset:0;
z-index:9997;
pointer-events:none;
opacity:0;
background:rgba(var(--accent-rgb),.16);
clip-path:circle(0 at var(--ripple-x,50vw) var(--ripple-y,50vh));
}
.theme-ripple.show {
animation:theme-ripple 620ms var(--ease-out) both;
}
@keyframes theme-ripple {
0% { opacity:.55; clip-path:circle(0 at var(--ripple-x,50vw) var(--ripple-y,50vh)); }
100% { opacity:0; clip-path:circle(150vmax at var(--ripple-x,50vw) var(--ripple-y,50vh)); }
}
.jiji-mascot.jiji-blink .jiji-btn img {
transform-origin:center 58%;
animation:jiji-blink 170ms linear;
}
.jiji-mascot.jiji-wave .jiji-btn {
animation:jiji-wave 700ms var(--ease-spring) both;
}
@keyframes jiji-blink {
0%,100% { transform:scaleY(1); }
48%,56% { transform:scaleY(.12); }
}
@keyframes jiji-wave {
0%,100% { transform:translateY(0) scale(1) rotate(0deg); }
35% { transform:translateY(-7px) scale(1.08) rotate(-4deg); }
62% { transform:translateY(-2px) scale(1.03) rotate(4deg); }
}
body.auth-crossfade #loginCard {
opacity:0;
transform:translateY(-10px);
pointer-events:none;
transition:opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
body.auth-crossfade #homeCard:not(.hidden) {
opacity:0;
transform:translateY(14px);
transition:opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}
body.auth-crossfade.auth-crossfade-in #homeCard:not(.hidden) {
opacity:1;
transform:translateY(0);
}
.badge,
.home-coin-badge,
.changelog-btn,
.fortune-result-label,
.review-count,
.pet-scene-label,
.pet-level-badge,
.pet-upgrade-btn,
.health-check,
.plaza-react,
.plaza-actions button,
.dm-contact,
.dm-contact em,
.tile.has-unread::after,
.pill,
.pet-plaza-bark,
.pet-plaza-pager,
#checkinDoBtn,
#checkinMakeupBtn,
.home-actions #loginEntryBtn,
.home-actions #logoutBtn {
border-radius:var(--radius-chip);
}
.bubble,
.dm-bubble,
.jiji-chat-msg,
.jiji-bubble,
.jiji-chat-panel,
.preview-panel,
.messages-card {
border-radius:var(--radius-card);
}
@media (min-width:640px) {
.today-hub-list {
grid-template-columns:repeat(2,minmax(0,1fr));
}
.home-planet-grid {
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media (min-width:1024px) {
body.app-nav-visible .app,
body.app-nav-suppressed .app {
width:min(1200px, calc(100% - 260px));
margin-left:220px;
margin-right:auto;
padding-left:24px;
padding-bottom:40px;
}
body.app-nav-visible .app-nav,
body.app-nav-suppressed .app-nav,
html[data-liquid-glass] body.app-nav-visible .app-nav,
html[data-liquid-glass] body.app-nav-suppressed .app-nav {
display:grid;
left:24px;
right:auto;
top:50%;
bottom:auto;
width:180px;
max-width:180px;
transform:translateY(-50%);
grid-template-columns:1fr;
padding:10px;
gap:4px;
margin:0;
border-radius:var(--radius-card);
box-shadow:0 18px 48px rgba(0,0,0,.20);
}
.app-nav-indicator {
left:10px;
width:2px;
height:var(--nav-indicator-h);
transform:translate3d(0,var(--nav-indicator-y),0);
}
.app-nav-item {
min-height:46px;
align-items:center;
justify-content:flex-start;
padding:0 10px 0 16px;
}
.app-nav-item strong {
font-size:.875rem;
}
.home-zone-grid,
.home-planet-grid,
.tiles {
grid-template-columns:repeat(3,minmax(0,1fr));
}
.home-planet-grid {
grid-template-columns:repeat(3,minmax(0,1fr));
}
}
@media (min-width:1280px) {
.home-zone-grid,
.home-planet-grid,
.tiles {
grid-template-columns:repeat(4,minmax(0,1fr));
}
.home-planet-grid {
grid-template-columns:repeat(4,minmax(0,1fr));
}
}
@media (max-width:1023px) {
.app-nav-visible .app {
padding-bottom:max(88px, calc(24px + env(safe-area-inset-bottom)));
}
.app-nav {
left:0;
right:0;
bottom:0;
width:100%;
max-width:none;
margin:0;
}
.home-zone-grid,
.home-planet-grid,
.tiles {
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media (max-width:640px) {
body {
font-size:.875rem;
}
.app {
padding:18px 12px max(24px,env(safe-area-inset-bottom));
}
h1 {
font-size:1.75rem;
}
h2,
.login-head h2,
.home-top h2 {
font-size:1.25rem;
}
.hero {
margin-top:4px;
gap:12px;
}
.sub {
display:none;
}
.hero-side,
.theme-switch {
width:100%;
align-items:stretch;
}
.theme-switch {
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:8px;
padding:8px;
}
.theme-switch-head {
display:contents;
}
.theme-switch-label {
display:none;
}
.theme-palette-toggle,
.theme-mode-btn {
width:100%;
min-height:44px;
padding:0 4px;
font-size:12px;
white-space:nowrap;
}
.theme-switch.open .theme-swatches {
position:fixed;
left:12px;
right:12px;
bottom:max(72px, calc(64px + env(safe-area-inset-bottom)));
z-index:120;
width:auto;
max-width:none;
max-height:none;
padding:14px;
justify-content:center;
transform:translateY(0);
box-shadow:0 18px 46px rgba(0,0,0,.34);
}
.theme-dot {
width:46px;
height:46px;
min-width:46px;
min-height:46px;
}
.login-card {
width:90vw;
max-width:360px;
padding:18px;
}
.home-tools,
.home-top {
grid-template-columns:1fr;
}
.home-filters {
overflow:auto;
flex-wrap:nowrap;
}
.home-zone-grid,
.home-planet-grid,
.tiles,
.today-hub-list {
grid-template-columns:1fr;
gap:12px;
}
.home-zone-card,
.today-card,
.tile {
transform:none;
}
.jiji-mascot {
right:12px;
bottom:max(70px, calc(60px + env(safe-area-inset-bottom)));
transform:scale(.78);
transform-origin:right bottom;
}
.jiji-btn img {
animation:jiji-breathe 3s var(--ease-in-out) infinite;
}
.split-char {
animation-delay:calc(var(--char-i) * 20ms + 80ms);
}
.motion-reveal {
transition-duration:400ms;
transition-delay:calc(var(--reveal-i,0) * 40ms);
}
}
@media (hover:none), (pointer:coarse) {
.home-zone-card,
.today-card,
.tile {
transform:none;
}
button:hover:not(:disabled) {
transform:none;
}
button:active:not(:disabled) {
transform:scale(.98);
}
}
@media (prefers-reduced-motion:reduce) {
html {
scroll-behavior:auto;
}
body::after,
.experience-veil,
.split-char,
.motion-reveal,
.jiji-btn img,
#loginBtn.is-loading::after {
animation:none;
transition:none;
}
.experience-veil {
display:none;
}
.split-char,
.motion-reveal {
opacity:1;
transform:none;
}
}
/* ===== v2026.09.01 UI polish: calmer home density ===== */
.home-top {
grid-template-columns:minmax(0,1fr) minmax(220px,auto);
min-height:auto;
padding:14px 16px;
align-items:center;
background:color-mix(in srgb,var(--card) 84%,var(--bg));
}
.home-top h2 {
margin-bottom:0;
font-size:clamp(1.45rem,2.4vw,1.9rem);
}
.home-top .muted {
margin-bottom:2px;
color:color-mix(in srgb,var(--muted) 88%,var(--text));
}
.home-top-right {
display:grid;
grid-template-columns:auto auto minmax(132px,auto);
grid-template-areas:
"coin badge actions"
"stats stats actions";
align-items:center;
justify-content:end;
gap:8px;
}
.home-coin-badge,
.changelog-btn {
justify-self:end;
}
.home-coin-badge {
grid-area:coin;
}
.home-top-right > .badge {
grid-area:badge;
}
.home-top-right > .site-stats {
grid-area:stats;
justify-self:end;
}
.home-top-right > .home-actions {
grid-area:actions;
}
.changelog-btn {
background:transparent;
color:var(--accent);
}
.today-hub-list {
grid-template-columns:repeat(2,minmax(0,1fr));
}
button.today-card,
button.today-card:not(.ghost):not(.tab):not(.home-filter):not(.app-nav-item):not(.theme-dot):not(.jiji-btn):not(.jiji-hide-btn) {
grid-template-columns:18px 1fr;
min-height:64px;
padding:12px 14px;
background:color-mix(in srgb,var(--card) 86%,var(--bg));
color:var(--text);
border-color:var(--line);
}
button.today-card::before {
content:none;
}
.today-card span {
width:8px;
height:24px;
align-self:stretch;
border-radius:var(--radius-chip);
opacity:.72;
}
.today-card strong {
align-self:end;
}
.today-card em {
align-self:start;
}
button.today-card.urgent,
button.today-card.urgent:not(.ghost):not(.tab):not(.home-filter):not(.app-nav-item):not(.theme-dot):not(.jiji-btn):not(.jiji-hide-btn) {
background:color-mix(in srgb,var(--accent) 11%,var(--card));
border-color:color-mix(in srgb,var(--accent) 42%,var(--line));
}
.today-next-btn,
button.today-next-btn,
#todayNextBtn {
background:transparent;
color:var(--accent);
border-color:var(--line);
}
#todayNextBtn::before {
content:none;
}
@media (max-width:760px) {
.home-top {
grid-template-columns:1fr;
align-items:start;
gap:14px;
padding:14px;
}
.home-top-right {
display:grid;
grid-template-columns:minmax(0,1fr) auto;
grid-template-areas:
"coin badge"
"stats stats"
"actions actions";
width:100%;
align-items:center;
justify-content:stretch;
}
.home-coin-badge,
.changelog-btn {
justify-self:stretch;
}
.home-top-right > .site-stats {
justify-self:start;
}
.home-top-right > .home-actions {
width:100%;
}
.home-actions .changelog-btn {
width:100%;
}
.today-hub-list {
grid-template-columns:1fr;
}
.today-card {
min-height:60px;
}
}
@media (max-width:640px) {
input,
textarea,
select {
font-size:16px;
}
.app-nav {
left:12px;
right:auto;
width:calc(100% - 96px);
max-width:320px;
border-radius:var(--radius-card);
}
.jiji-mascot,
.jiji-mascot:not(.is-positioned) {
right:-24px;
bottom:max(2px, env(safe-area-inset-bottom));
z-index:72;
transform:scale(.5);
transform-origin:right bottom;
}
.jiji-hide-btn {
display:none;
}
.jiji-bubble,
.jiji-context-chip {
display:none;
}
}
/* ===== v2026.09.01-ui-refine：首屏构图和色调控件去工具箱感 ===== */
.hero {
min-height:210px;
align-items:flex-start;
}
.hero-side {
align-self:flex-start;
}
.theme-switch {
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-items:center;
justify-content:flex-end;
width:min(330px,100%);
gap:8px;
padding:0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
backdrop-filter:none;
-webkit-backdrop-filter:none;
}
.theme-switch-head {
display:flex;
align-items:center;
gap:8px;
}
.theme-switch-label {
font-size:.75rem;
color:color-mix(in srgb,var(--muted) 88%,var(--text));
letter-spacing:.02em;
}
.theme-palette-toggle,
.theme-mode-btn {
min-height:44px;
padding:0 11px;
color:color-mix(in srgb,var(--accent) 82%,var(--muted));
background:color-mix(in srgb,var(--card) 20%,transparent);
border:1px solid color-mix(in srgb,var(--line) 76%,transparent);
}
.theme-palette-toggle:hover:not(:disabled),
.theme-mode-btn:hover:not(:disabled) {
color:var(--text);
background:color-mix(in srgb,var(--accent) 12%,var(--card));
border-color:rgba(var(--accent-rgb),.44);
box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 10%,transparent);
filter:none;
}
.theme-swatches {
right:0;
bottom:auto;
top:calc(100% + 8px);
background:color-mix(in srgb,var(--card) 88%,transparent);
}
.login-card {
margin-top:-8px;
}
#loginMsg:empty {
display:none;
}
.app-footer {
letter-spacing:.02em;
}
@media (min-width:1024px) {
.hero {
min-height:180px;
margin-bottom:16px;
}
.login-card {
margin-top:-16px;
}
}
@media (max-width:640px) {
.hero {
min-height:auto;
margin-bottom:18px;
}
.sub {
display:block;
max-width:21rem;
font-size:.875rem;
}
.hero-side,
.theme-switch {
width:100%;
}
.theme-switch {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:8px;
padding:0;
}
.theme-switch-head {
display:contents;
}
.theme-switch-label {
display:none;
}
.theme-palette-toggle,
.theme-mode-btn {
min-height:44px;
width:100%;
padding:0 4px;
}
.theme-switch.open .theme-swatches,
.theme-switch.hover-open .theme-swatches,
.theme-switch .theme-swatches {
position:fixed;
left:12px;
right:12px;
top:auto;
bottom:max(72px, calc(64px + env(safe-area-inset-bottom)));
width:auto;
max-width:none;
justify-content:center;
}
.login-card {
margin-top:0;
}
}
/* ===== local playful preview: ?ui=playful ===== */
html[data-ui-variant='playful'] {
color-scheme:light;
--bg:#f5f7fb;
--card:#fffdf9;
--card-rgb:255,253,249;
--panel:#edf4ff;
--line:rgba(39,57,82,.16);
--line-soft:rgba(39,57,82,.10);
--text:#20283a;
--muted:#69758a;
--accent:#f16d62;
--accent2:#168f89;
--accent-rgb:241,109,98;
--accent2-rgb:22,143,137;
--ok:#299b68;
--danger:#d94b63;
--danger-rgb:217,75,99;
--bg-glow:rgba(241,109,98,.06);
--user-bubble:#536ed4;
--gold:#e5a935;
--gold2:#f2c45b;
--on-accent:#ffffff;
--radius-card:16px;
--radius-control:11px;
--radius-chip:8px;
--ease-spring:cubic-bezier(.22,1.42,.36,1);
}
html[data-ui-variant='playful'] body {
background:var(--bg);
color:var(--text);
}
html[data-ui-variant='playful'] .experience-veil,
html[data-ui-variant='playful'] body::before,
html[data-ui-variant='playful'] body::after {
background:none;
box-shadow:none;
filter:none;
}
html[data-ui-variant='playful'] .experience-veil {
opacity:.2;
}
html[data-ui-variant='playful'] .hero {
min-height:190px;
padding:20px 0;
}
html[data-ui-variant='playful'] .hero h1 {
color:var(--text);
background:none;
-webkit-text-fill-color:currentColor;
}
html[data-ui-variant='playful'] .eyebrow {
color:var(--accent2);
font-weight:800;
}
html[data-ui-variant='playful'] .card,
html[data-ui-variant='playful'] .home-zone-card,
html[data-ui-variant='playful'] .today-hub,
html[data-ui-variant='playful'] .newcomer-guide,
html[data-ui-variant='playful'] .notification-center,
html[data-ui-variant='playful'] .weekly-event-hub,
html[data-ui-variant='playful'] .site-map-hub {
border-color:var(--line);
background:var(--card);
box-shadow:0 18px 42px rgba(54,72,105,.10), 0 2px 0 rgba(255,255,255,.9) inset;
}
html[data-ui-variant='playful'] .login-card,
html[data-ui-variant='playful'] .home-card {
animation:playful-card-in .62s var(--ease-spring) both;
}
html[data-ui-variant='playful'] button {
border-radius:var(--radius-control);
transition:background-color .18s ease, color .18s ease, border-color .18s ease, transform .28s var(--ease-spring), box-shadow .22s ease, filter .18s ease;
}
html[data-ui-variant='playful'] button:hover:not(:disabled) {
transform:translateY(-2px) scale(1.015);
}
html[data-ui-variant='playful'] button:active:not(:disabled) {
transform:translateY(1px) scale(.94);
}/* playful 变体里 button 的基础文字色是 --on-accent（近白），而筛选/标签类
按钮是透明底（由各自规则设置，且被下方 button:not(:is(...)) 的彩色底排除），
于是出现「白字白底、只有 hover 才看得见」。这里用更高特异性还原成 --muted。 */
html[data-ui-variant='playful'] .home-filter:not(.active),
html[data-ui-variant='playful'] .tab:not(.active),
html[data-ui-variant='playful'] .plaza-filter:not(.active),
html[data-ui-variant='playful'] .pet-tab:not(.active){
color:var(--muted);
}
html[data-ui-variant='playful'] .admin-work-tab:not(.active){
color:var(--admin-muted);
}
html[data-ui-variant='playful'] button.primary,
html[data-ui-variant='playful'] button:not(:is(.ghost,.tab,.home-filter,.app-nav-item,.theme-dot,.jiji-btn,.jiji-hide-btn,.tile,.today-card,.newcomer-step,.home-zone-main,.pet-home-status,.pet-space-action,.dm-contact,.draw-select,.pet-plaza-resident,.weekly-reward-card,.cookie-row,.kana-choice,.gomoku-cell,[class*='admin-'])) {
background:var(--accent);
border-color:var(--accent);
color:var(--on-accent);
box-shadow:0 8px 0 color-mix(in srgb,var(--accent) 72%,#b83d42), 0 14px 24px rgba(241,109,98,.17);
}
html[data-ui-variant='playful'] button.primary:hover:not(:disabled),
html[data-ui-variant='playful'] button:not(:is(.ghost,.tab,.home-filter,.app-nav-item,.theme-dot,.jiji-btn,.jiji-hide-btn,.tile,.today-card,.newcomer-step,.home-zone-main,.pet-home-status,.pet-space-action,.dm-contact,.draw-select,.pet-plaza-resident,.weekly-reward-card,.cookie-row,.kana-choice,.gomoku-cell,[class*='admin-'])):hover:not(:disabled) {
color:var(--on-accent);
background:color-mix(in srgb,var(--accent) 86%,#ffffff);
box-shadow:0 10px 0 color-mix(in srgb,var(--accent) 72%,#b83d42), 0 18px 28px rgba(241,109,98,.2);
}
html[data-ui-variant='playful'] .ghost,
html[data-ui-variant='playful'] button.ghost,
html[data-ui-variant='playful'] .small.ghost {
color:var(--accent2);
background:rgba(255,255,255,.58);
border-color:color-mix(in srgb,var(--accent2) 30%,var(--line));
box-shadow:0 4px 0 color-mix(in srgb,var(--accent2) 16%,transparent);
}
html[data-ui-variant='playful'] .ghost:hover:not(:disabled),
html[data-ui-variant='playful'] button.ghost:hover:not(:disabled),
html[data-ui-variant='playful'] .small.ghost:hover:not(:disabled) {
color:var(--accent2);
background:#ecfbf5;
border-color:var(--accent2);
box-shadow:0 6px 0 color-mix(in srgb,var(--accent2) 18%,transparent);
}
html[data-ui-variant='playful'] input,
html[data-ui-variant='playful'] textarea,
html[data-ui-variant='playful'] select {
background:#ffffff;
border-color:var(--line);
color:var(--text);
box-shadow:0 2px 0 rgba(255,255,255,.9) inset;
}
html[data-ui-variant='playful'] input:focus,
html[data-ui-variant='playful'] textarea:focus,
html[data-ui-variant='playful'] select:focus {
border-color:var(--accent2);
box-shadow:0 0 0 4px rgba(var(--accent2-rgb),.14), 0 2px 0 rgba(255,255,255,.9) inset;
}
html[data-ui-variant='playful'] .tabs,
html[data-ui-variant='playful'] .home-tools,
html[data-ui-variant='playful'] .home-search {
background:rgba(255,255,255,.7);
border-color:var(--line);
}
html[data-ui-variant='playful'] .tab.active,
html[data-ui-variant='playful'] .home-filter.active {
color:var(--on-accent);
background:var(--accent);
border-color:var(--accent);
box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 72%,#b83d42);
}
html[data-ui-variant='playful'] .tile,
html[data-ui-variant='playful'] .today-card,
html[data-ui-variant='playful'] .home-zone-main {
background:var(--card);
color:var(--text);
border-color:var(--line);
box-shadow:0 8px 0 rgba(39,57,82,.06), 0 12px 24px rgba(54,72,105,.08);
}
html[data-ui-variant='playful'] .home-zone-card {
border-top:3px solid var(--zone-glow,var(--accent));
}
html[data-ui-variant='playful'] .tile:hover,
html[data-ui-variant='playful'] .today-card:hover:not(:disabled),
html[data-ui-variant='playful'] .home-zone-main:hover:not(:disabled) {
border-color:var(--accent2);
box-shadow:0 10px 0 rgba(var(--accent2-rgb),.12), 0 18px 30px rgba(54,72,105,.13);
}
html[data-ui-variant='playful'] .tile strong,
html[data-ui-variant='playful'] .home-zone-main strong,
html[data-ui-variant='playful'] .today-card strong {
color:var(--text);
}
html[data-ui-variant='playful'] .tile:hover strong,
html[data-ui-variant='playful'] .home-zone-card:hover .home-zone-main strong {
color:var(--accent);
}
html[data-ui-variant='playful'] body.motion-ready .home-zone-main {
animation:none;
}
html[data-ui-variant='playful'] .home-zone-actions button {
min-height:44px;
color:var(--accent2);
background:#f0fbf7;
border-color:rgba(var(--accent2-rgb),.22);
box-shadow:0 3px 0 rgba(var(--accent2-rgb),.10);
}
html[data-ui-variant='playful'] .home-zone-actions button:hover:not(:disabled) {
color:#0f6e6a;
background:#dff7ef;
border-color:var(--accent2);
box-shadow:0 5px 0 rgba(var(--accent2-rgb),.14);
}
html[data-ui-variant='playful'] .home-jiji-guide {
background:#fff5e9;
border-color:rgba(241,109,98,.24);
box-shadow:0 8px 0 rgba(241,109,98,.08), 0 14px 26px rgba(54,72,105,.08);
}
html[data-ui-variant='playful'] .home-jiji-guide img,
html[data-ui-variant='playful'] .jiji-btn img {
filter:drop-shadow(0 12px 14px rgba(54,72,105,.17));
}
html[data-ui-variant='playful'] .jiji-btn {
animation:jiji-playful-bounce 3.8s ease-in-out infinite;
}
html[data-ui-variant='playful'] .jiji-btn:hover:not(:disabled) {
filter:saturate(1.12);
}
html[data-ui-variant='playful'] .jiji-bubble.show {
animation:playful-bubble-pop .38s var(--ease-spring) both;
border-color:rgba(var(--accent-rgb),.34);
background:#fffdf9;
color:var(--text);
box-shadow:0 8px 0 rgba(241,109,98,.08), 0 16px 28px rgba(54,72,105,.14);
}
html[data-ui-variant='playful'] .app-nav {
background:rgba(255,253,249,.94);
border-color:var(--line);
box-shadow:0 12px 28px rgba(54,72,105,.12);
}
html[data-ui-variant='playful'] .app-nav-item.active {
color:var(--accent);
}
html[data-ui-variant='playful'] .app-nav-indicator {
background:var(--accent);
box-shadow:0 2px 8px rgba(var(--accent-rgb),.3);
}
html[data-ui-variant='playful'] .badge,
html[data-ui-variant='playful'] .home-coin-badge,
html[data-ui-variant='playful'] .pill {
color:var(--accent2);
background:#effaf6;
border-color:rgba(var(--accent2-rgb),.22);
}
@keyframes playful-card-in {
0% { opacity:0; transform:translateY(18px) scale(.97); }
65% { opacity:1; transform:translateY(-3px) scale(1.01); }
100% { opacity:1; transform:none; }
}
@keyframes jiji-playful-bounce {
0%,100% { transform:translateY(0) rotate(0); }
48% { transform:translateY(-5px) rotate(-1.5deg); }
56% { transform:translateY(-2px) rotate(1.5deg); }
}
@keyframes playful-bubble-pop {
0% { opacity:0; transform:translateY(8px) scale(.86); }
72% { opacity:1; transform:translateY(-2px) scale(1.03); }
100% { opacity:1; transform:none; }
}
@media (max-width:640px) {
html[data-ui-variant='playful'] .hero {
padding:12px 0 16px;
}
html[data-ui-variant='playful'] .home-zone-card {
animation:none;
}
}
@media (prefers-reduced-motion:reduce) {
html[data-ui-variant='playful'] .login-card,
html[data-ui-variant='playful'] .home-card,
html[data-ui-variant='playful'] .jiji-btn,
html[data-ui-variant='playful'] .jiji-bubble.show {
animation:none;
}
html[data-ui-variant='playful'] button:hover:not(:disabled),
html[data-ui-variant='playful'] button:active:not(:disabled) {
transform:none;
}
}
/* ===== local playful preview v2: retained alongside the tavern skin ===== */
html[data-ui-variant='playful'] {
color-scheme:light;
--bg:#f7f5ec;
--card:#fffdf7;
--card-rgb:255,253,247;
--panel:#eef6fb;
--line:rgba(35,54,78,.18);
--line-soft:rgba(35,54,78,.12);
--text:#182236;
--muted:#59677f;
--accent:#ee6258;
--accent2:#0f8d83;
--accent-rgb:238,98,88;
--accent2-rgb:15,141,131;
--ok:#24966a;
--danger:#c94f65;
--danger-rgb:201,79,101;
--bg-glow:rgba(22,143,131,.06);
--user-bubble:#536bd6;
--gold:#dfaa34;
--gold2:#f0c65a;
--on-accent:#fffefa;
--radius-card:12px;
--radius-control:10px;
--radius-chip:7px;
--playful-sky:#ddecff;
--playful-mint:#ddf6ec;
--playful-cream:#fff6df;
--playful-rose:#fff0ee;
--playful-ink:#20283a;
--playful-shadow:0 16px 34px rgba(57,75,105,.12), 0 2px 0 rgba(255,255,255,.92) inset;
--playful-lift:0 12px 0 rgba(35,54,78,.055), 0 22px 38px rgba(57,75,105,.12);
--ease-spring:cubic-bezier(.2,1.32,.34,1);
}
html[data-ui-variant='playful'] body {
background:
linear-gradient(180deg,#f3f0e5 0,#f7f5ec 36%,#fbfaf5 100%);
color:var(--text);
text-rendering:optimizeLegibility;
}
html[data-ui-variant='playful'] body::before,
html[data-ui-variant='playful'] body::after,
html[data-ui-variant='playful'] .experience-veil,
html[data-ui-variant='playful'] .experience-veil::before {
background:none;
box-shadow:none;
filter:none;
}
html[data-ui-variant='playful'] .hero {
min-height:176px;
padding:18px 0;
}
html[data-ui-variant='playful'] .eyebrow {
color:var(--accent2);
letter-spacing:.04em;
font-weight:900;
}
html[data-ui-variant='playful'] h1,
html[data-ui-variant='playful'] body.motion-ready .hero h1 {
color:var(--text);
background:none;
-webkit-text-fill-color:currentColor;
}
html[data-ui-variant='playful'] .sub,
html[data-ui-variant='playful'] .muted,
html[data-ui-variant='playful'] .small-text,
html[data-ui-variant='playful'] .field-label {
color:var(--muted);
}html[data-ui-variant='playful'] .card,
html[data-ui-variant='playful'] .login-card,
html[data-ui-variant='playful'] .home-card,
html[data-ui-variant='playful'] .chat-card,
html[data-ui-variant='playful'] .today-hub,
html[data-ui-variant='playful'] .newcomer-guide,
html[data-ui-variant='playful'] .notification-center,
html[data-ui-variant='playful'] .weekly-event-hub,
html[data-ui-variant='playful'] .site-map-hub,
html[data-ui-variant='playful'] .home-zone-card,
html[data-ui-variant='playful'] .preview-panel,
html[data-ui-variant='playful'] .jiji-chat-panel{
background:var(--card);
border-color:var(--line);
box-shadow:var(--playful-shadow);
}
html[data-ui-variant='playful'] .admin-card{
background:var(--admin-card);
border-color:var(--admin-line);
box-shadow:var(--playful-shadow);
}
html[data-ui-variant='playful'] .home-top h2,
html[data-ui-variant='playful'] .login-head h2 {
color:var(--text);
}
html[data-ui-variant='playful'] .login-card,
html[data-ui-variant='playful'] .home-card {
animation:playful-card-in-v2 .48s var(--ease-spring) both;
}
html[data-ui-variant='playful'] .tabs,
html[data-ui-variant='playful'] .home-tools,
html[data-ui-variant='playful'] .home-search,
html[data-ui-variant='playful'] .chat-persona-row,
html[data-ui-variant='playful'] .composer,
html[data-ui-variant='playful'] .theme-swatches {
background:rgba(255,255,255,.68);
border-color:var(--line);
box-shadow:0 10px 26px rgba(57,75,105,.08);
}
html[data-ui-variant='playful'] input,
html[data-ui-variant='playful'] textarea,
html[data-ui-variant='playful'] select {
background:#ffffff;
color:var(--text);
border-color:rgba(35,54,78,.17);
box-shadow:0 2px 0 rgba(255,255,255,.9) inset;
}
html[data-ui-variant='playful'] input:focus,
html[data-ui-variant='playful'] textarea:focus,
html[data-ui-variant='playful'] select:focus {
border-color:var(--accent2);
box-shadow:0 0 0 4px rgba(var(--accent2-rgb),.14), 0 2px 0 rgba(255,255,255,.9) inset;
}
html[data-ui-variant='playful'] button {
color:var(--on-accent);
transform-origin:center;
transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .24s var(--ease-spring),box-shadow .2s ease,filter .18s ease;
}
html[data-ui-variant='playful'] button:hover:not(:disabled) {
color:var(--on-accent);
transform:translateY(-2px);
filter:none;
}
html[data-ui-variant='playful'] button:active:not(:disabled) {
transform:translateY(1px) scale(.97);
}
html[data-ui-variant='playful'] button.primary,
html[data-ui-variant='playful'] button:not(:is(.ghost,.tab,.home-filter,.app-nav-item,.theme-dot,.jiji-btn,.jiji-hide-btn,.tile,.today-card,.newcomer-step,.today-next-btn,.changelog-btn,.home-zone-main,.home-zone-actions button,.pet-home-status,.pet-space-action,.dm-contact,.draw-select,.pet-plaza-resident,.weekly-reward-card,.cookie-row,.kana-choice,.gomoku-cell,.site-map-chip,[class*='admin-'])) {
color:var(--on-accent);
background:var(--accent);
border-color:var(--accent);
box-shadow:0 5px 0 color-mix(in srgb,var(--accent) 74%,#a93a43),0 14px 24px rgba(var(--accent-rgb),.18);
}
html[data-ui-variant='playful'] button.primary:hover:not(:disabled),
html[data-ui-variant='playful'] button:not(:is(.ghost,.tab,.home-filter,.app-nav-item,.theme-dot,.jiji-btn,.jiji-hide-btn,.tile,.today-card,.newcomer-step,.today-next-btn,.changelog-btn,.home-zone-main,.home-zone-actions button,.pet-home-status,.pet-space-action,.dm-contact,.draw-select,.pet-plaza-resident,.weekly-reward-card,.cookie-row,.kana-choice,.gomoku-cell,.site-map-chip,[class*='admin-'])):hover:not(:disabled) {
background:#f47a70;
border-color:#f47a70;
box-shadow:0 7px 0 color-mix(in srgb,var(--accent) 72%,#a93a43),0 18px 30px rgba(var(--accent-rgb),.20);
}
html[data-ui-variant='playful'] .ghost,
html[data-ui-variant='playful'] button.ghost,
html[data-ui-variant='playful'] .small.ghost {
color:var(--accent2);
background:rgba(255,255,255,.74);
border-color:rgba(var(--accent2-rgb),.28);
box-shadow:0 3px 0 rgba(var(--accent2-rgb),.10);
}
html[data-ui-variant='playful'] .ghost:hover:not(:disabled),
html[data-ui-variant='playful'] button.ghost:hover:not(:disabled),
html[data-ui-variant='playful'] .small.ghost:hover:not(:disabled) {
color:#0f6762;
background:var(--playful-mint);
border-color:rgba(var(--accent2-rgb),.42);
box-shadow:0 5px 0 rgba(var(--accent2-rgb),.13);
}
html[data-ui-variant='playful'] .theme-palette-toggle,
html[data-ui-variant='playful'] .theme-mode-btn,
html[data-ui-variant='playful'] .small {
min-height:44px;
line-height:1;
}
html[data-ui-variant='playful'] .liquid-glass-toggle.active,
html[data-ui-variant='playful'] .ui-variant-toggle.active,
html[data-ui-variant='playful'] .tab.active,
html[data-ui-variant='playful'] .home-filter.active {
color:#9f3d37;
background:var(--playful-rose);
border-color:rgba(var(--accent-rgb),.38);
box-shadow:0 3px 0 rgba(var(--accent-rgb),.12);
}
html[data-ui-variant='playful'] .liquid-glass-toggle.active:hover:not(:disabled),
html[data-ui-variant='playful'] .ui-variant-toggle.active:hover:not(:disabled),
html[data-ui-variant='playful'] .tab.active:hover:not(:disabled),
html[data-ui-variant='playful'] .home-filter.active:hover:not(:disabled) {
color:#8f332e;
background:#ffe5e1;
border-color:rgba(var(--accent-rgb),.48);
}
html[data-ui-variant='playful'] .tab,
html[data-ui-variant='playful'] .home-filter,
html[data-ui-variant='playful'] .tab:hover:not(.active),
html[data-ui-variant='playful'] .home-filter:hover:not(.active),
html[data-ui-variant='playful'] .home-zone-card {
border-top:3px solid var(--zone-glow,var(--accent2));
box-shadow:var(--playful-lift);
}
html[data-ui-variant='playful'] .changelog-btn,
html[data-ui-variant='playful'] .today-next-btn,
html[data-ui-variant='playful'] button.today-next-btn,
html[data-ui-variant='playful'] #todayNextBtn,
html[data-ui-variant='playful'] .home-zone-actions button {
color:#0f6964;
background:rgba(255,255,255,.78);
border-color:rgba(var(--accent2-rgb),.28);
box-shadow:0 3px 0 rgba(var(--accent2-rgb),.10);
}
html[data-ui-variant='playful'] .changelog-btn:hover:not(:disabled),
html[data-ui-variant='playful'] .today-next-btn:hover:not(:disabled),
html[data-ui-variant='playful'] button.today-next-btn:hover:not(:disabled),
html[data-ui-variant='playful'] #todayNextBtn:hover:not(:disabled),
html[data-ui-variant='playful'] .home-zone-actions button:hover:not(:disabled) {
color:#0b5955;
background:var(--playful-mint);
border-color:rgba(var(--accent2-rgb),.42);
box-shadow:0 5px 0 rgba(var(--accent2-rgb),.13);
}
html[data-ui-variant='playful'] .changelog-btn span {
color:#9a6815;
}
@media (min-width:980px) {
html[data-ui-variant='playful'] .home-card {
display:block;
}
html[data-ui-variant='playful'] .today-hub,
html[data-ui-variant='playful'] .home-jiji-guide {
width:100%;
}
}html[data-ui-variant='playful'] .home-zone-main,
html[data-ui-variant='playful'] .tile,
html[data-ui-variant='playful'] .today-card,
html[data-ui-variant='playful'] .newcomer-step,
html[data-ui-variant='playful'] .notification-item,
html[data-ui-variant='playful'] .home-pulse-item,
html[data-ui-variant='playful'] .site-map-panel,
html[data-ui-variant='playful'] .weekly-reward-card,
html[data-ui-variant='playful'] .weekly-challenge-card,
html[data-ui-variant='playful'] .status-item,
html[data-ui-variant='playful'] .row-item,
html[data-ui-variant='playful'] .profile-section,
html[data-ui-variant='playful'] .pet-stat,
html[data-ui-variant='playful'] .pet-vital,
html[data-ui-variant='playful'] .pet-shop-item,
html[data-ui-variant='playful'] .pet-species-choice,
html[data-ui-variant='playful'] .pet-plaza-resident,
html[data-ui-variant='playful'] .dm-contact,
html[data-ui-variant='playful'] .draw-select,
html[data-ui-variant='playful'] .kana-choice,
html[data-ui-variant='playful'] .cookie-row{
background:var(--card);
color:var(--text);
border-color:var(--line);
box-shadow:0 8px 0 rgba(35,54,78,.045),0 14px 25px rgba(57,75,105,.08);
}
html[data-ui-variant='playful'] .admin-row{
background:var(--admin-card);
color:var(--admin-text);
border-color:var(--admin-line);
box-shadow:0 8px 0 rgba(35,54,78,.045),0 14px 25px rgba(57,75,105,.08);
}
html[data-ui-variant='playful'] .home-zone-main:hover:not(:disabled),
html[data-ui-variant='playful'] .tile:hover:not(:disabled),
html[data-ui-variant='playful'] .today-card:hover:not(:disabled),
html[data-ui-variant='playful'] .newcomer-step:hover:not(:disabled),
html[data-ui-variant='playful'] .notification-item:hover:not(:disabled),
html[data-ui-variant='playful'] .weekly-reward-card:hover:not(:disabled),
html[data-ui-variant='playful'] .dm-contact:hover:not(:disabled),
html[data-ui-variant='playful'] .kana-choice:hover:not(:disabled) {
color:var(--text);
border-color:rgba(var(--accent2-rgb),.44);
transform:translateY(-3px);
box-shadow:0 10px 0 rgba(var(--accent2-rgb),.10),0 20px 34px rgba(57,75,105,.13);
}
html[data-ui-variant='playful'] .home-zone-main span,
html[data-ui-variant='playful'] .today-card span,
html[data-ui-variant='playful'] .newcomer-step span,
html[data-ui-variant='playful'] .weekly-reward-card span,
html[data-ui-variant='playful'] .pet-home-symbol {
background:var(--playful-sky);
color:#3264b6;
border-color:rgba(50,100,182,.16);
}
html[data-ui-variant='playful'] .home-zone-main strong,
html[data-ui-variant='playful'] .tile strong,
html[data-ui-variant='playful'] .today-card strong,
html[data-ui-variant='playful'] .newcomer-step strong,
html[data-ui-variant='playful'] .weekly-event-feature strong,
html[data-ui-variant='playful'] .site-map-label {
color:var(--playful-ink);
}
html[data-ui-variant='playful'] .home-zone-main em,
html[data-ui-variant='playful'] .tile span,
html[data-ui-variant='playful'] .today-card em,
html[data-ui-variant='playful'] .newcomer-step em {
color:var(--muted);
}
html[data-ui-variant='playful'] .home-zone-card:hover .home-zone-main strong,
html[data-ui-variant='playful'] .tile:hover strong,
html[data-ui-variant='playful'] .today-card:hover strong,
html[data-ui-variant='playful'] .newcomer-step:hover strong {
color:var(--accent);
}
html[data-ui-variant='playful'] .today-summary,
html[data-ui-variant='playful'] .home-jiji-guide,
html[data-ui-variant='playful'] .pet-home-status,
html[data-ui-variant='playful'] .bubble.assistant,
html[data-ui-variant='playful'] .dm-bubble.in,
html[data-ui-variant='playful'] .jiji-chat-msg.bot {
background:var(--playful-cream);
border-color:rgba(223,170,52,.22);
color:var(--text);
box-shadow:0 8px 0 rgba(223,170,52,.08),0 15px 28px rgba(57,75,105,.08);
}
html[data-ui-variant='playful'] .bubble.user,
html[data-ui-variant='playful'] .dm-bubble.out,
html[data-ui-variant='playful'] .jiji-chat-msg.user {
background:var(--user-bubble);
color:#ffffff;
}
html[data-ui-variant='playful'] .badge,
html[data-ui-variant='playful'] .home-coin-badge,
html[data-ui-variant='playful'] .pill,
html[data-ui-variant='playful'] .pet-level-badge,
html[data-ui-variant='playful'] .review-count,
html[data-ui-variant='playful'] .pet-scene-label,
html[data-ui-variant='playful'] .health-check {
color:#966913;
background:var(--playful-cream);
border-color:rgba(223,170,52,.30);
box-shadow:0 4px 0 rgba(223,170,52,.10);
}
html[data-ui-variant='playful'] .site-stat strong,
html[data-ui-variant='playful'] .status-item strong,
html[data-ui-variant='playful'] .pet-stat strong,
html[data-ui-variant='playful'] .cookie-stats strong,
html[data-ui-variant='playful'] .snake-stat strong,
html[data-ui-variant='playful'] .tank-stat strong,
html[data-ui-variant='playful'] .health-card strong {
color:var(--accent2);
}
html[data-ui-variant='playful'] .app-nav {
background:rgba(255,253,247,.94);
border-color:rgba(35,54,78,.14);
box-shadow:0 14px 34px rgba(57,75,105,.14);
}
html[data-ui-variant='playful'] .app-nav-item {
color:var(--muted);
}
html[data-ui-variant='playful'] .app-nav-item:hover,
html[data-ui-variant='playful'] .app-nav-item.active {
color:var(--accent);
}
html[data-ui-variant='playful'] .app-nav-indicator {
background:var(--accent);
box-shadow:0 2px 10px rgba(var(--accent-rgb),.28);
}
html[data-ui-variant='playful'] .theme-dot:hover {
background:rgba(var(--accent2-rgb),.08);
}
html[data-ui-variant='playful'] .theme-ripple {
background:rgba(var(--accent2-rgb),.16);
}
html[data-ui-variant='playful'] .jiji-btn {
animation:jiji-playful-bounce-v2 4.4s ease-in-out infinite;
}
html[data-ui-variant='playful'] .jiji-btn:hover:not(:disabled) {
transform:translateY(-4px) rotate(-1deg);
filter:saturate(1.08);
}
html[data-ui-variant='playful'] .jiji-bubble.show {
background:var(--card);
color:var(--text);
border-color:rgba(var(--accent-rgb),.28);
box-shadow:0 8px 0 rgba(var(--accent-rgb),.08),0 18px 32px rgba(57,75,105,.14);
animation:playful-bubble-pop-v2 .32s var(--ease-spring) both;
}
html[data-ui-variant='playful'] .pet-town-shell,
html[data-ui-variant='playful'] .pet-town-stage,
html[data-ui-variant='playful'] .pet-town-panel,
html[data-ui-variant='playful'] .snake-screen,
html[data-ui-variant='playful'] .tank-stage,
html[data-ui-variant='playful'] .gomoku-board,
html[data-ui-variant='playful'] .cookie-screen,
html[data-ui-variant='playful'] .kana-board,
html[data-ui-variant='playful'] .mcu-preview,
html[data-ui-variant='playful'] .mcu-panel {
border-color:rgba(35,54,78,.18);
box-shadow:0 14px 30px rgba(57,75,105,.13);
}
html[data-ui-variant='playful'] .snake-screen,
html[data-ui-variant='playful'] .tank-stage,
html[data-ui-variant='playful'] .gomoku-board,
html[data-ui-variant='playful'] .cookie-screen,
html[data-ui-variant='playful'] .kana-board {
background:#263047;
color:#f8fbff;
}
html[data-ui-variant='playful'] .pet-town-panel,
html[data-ui-variant='playful'] .pet-town-menu,
html[data-ui-variant='playful'] .pet-town-guide,
html[data-ui-variant='playful'] .pet-town-story,
html[data-ui-variant='playful'] .pet-town-tasks,
html[data-ui-variant='playful'] .pet-town-retention {
background:rgba(255,253,247,.90);
color:var(--text);
border-color:var(--line);
}
html[data-ui-variant='playful'] .home-zone-card.motion-hovering,
html[data-ui-variant='playful'] .today-card.motion-hovering,
html[data-ui-variant='playful'] .home-pulse-item.motion-hovering,
html[data-ui-variant='playful'] .notification-item.motion-hovering,
html[data-ui-variant='playful'] .row-item.motion-hovering,
html[data-ui-variant='playful'] .pet-shop-item.motion-hovering,
html[data-ui-variant='playful'] .pet-species-choice.motion-hovering,
html[data-ui-variant='playful'] .changelog-day.motion-hovering,
html[data-ui-variant='playful'] .home-zone-main.motion-hovering,
html[data-ui-variant='playful'] .tile.motion-hovering,
html[data-ui-variant='playful'] .app-nav-item.motion-hovering {
transform:translateY(-3px);
box-shadow:0 10px 0 rgba(var(--accent2-rgb),.09),0 20px 34px rgba(57,75,105,.13);
}
html[data-ui-variant='playful'] body.motion-ready .home-zone-main {
animation:none;
}
html[data-ui-variant='playful'] body.motion-ready .today-card.urgent {
animation:playful-urgent-bounce 1.9s ease-in-out infinite;
}
@keyframes playful-card-in-v2 {
0% { opacity:0; transform:translateY(14px) scale(.985); }
70% { opacity:1; transform:translateY(-2px) scale(1.006); }
100% { opacity:1; transform:none; }
}
@keyframes jiji-playful-bounce-v2 {
0%,100% { transform:translateY(0) rotate(0); }
46% { transform:translateY(-5px) rotate(-1deg); }
58% { transform:translateY(-2px) rotate(1deg); }
}
@keyframes playful-bubble-pop-v2 {
0% { opacity:0; transform:translateY(8px) scale(.9); }
74% { opacity:1; transform:translateY(-2px) scale(1.025); }
100% { opacity:1; transform:none; }
}
@keyframes playful-urgent-bounce {
0%,100% { transform:translateY(0); }
50% { transform:translateY(-2px); }
}
@media (max-width:640px) {
html[data-ui-variant='playful'] .hero {
padding:10px 0 14px;
}
html[data-ui-variant='playful'] .theme-switch {
grid-template-columns:repeat(5,minmax(0,1fr));
}
html[data-ui-variant='playful'] .theme-palette-toggle,
html[data-ui-variant='playful'] .theme-mode-btn {
min-height:44px;
padding:0 3px;
font-size:11px;
}
html[data-ui-variant='playful'] .home-zone-card,
html[data-ui-variant='playful'] .tile,
html[data-ui-variant='playful'] .today-card {
box-shadow:0 8px 18px rgba(57,75,105,.09);
}
}
@media (hover:none), (pointer:coarse) {
html[data-ui-variant='playful'] button:hover:not(:disabled),
html[data-ui-variant='playful'] .home-zone-main:hover:not(:disabled),
html[data-ui-variant='playful'] .tile:hover:not(:disabled),
html[data-ui-variant='playful'] .today-card:hover:not(:disabled),
html[data-ui-variant='playful'] .notification-item:hover:not(:disabled),
html[data-ui-variant='playful'] .weekly-reward-card:hover:not(:disabled),
html[data-ui-variant='playful'] .dm-contact:hover:not(:disabled),
html[data-ui-variant='playful'] .kana-choice:hover:not(:disabled) {
transform:none;
}
}
@media (prefers-reduced-motion:reduce) {
html[data-ui-variant='playful'] .login-card,
html[data-ui-variant='playful'] .home-card,
html[data-ui-variant='playful'] .jiji-btn,
html[data-ui-variant='playful'] .jiji-bubble.show,
html[data-ui-variant='playful'] body.motion-ready .today-card.urgent {
animation:none;
}
}
/* ===== v2026.09.05 button state cleanup: prevent neutral controls from rendering as solid red ===== */
button:is(
.home-jiji-guide,
.home-pulse-item,
.notification-item,
.weekly-challenge-card,
.site-map-action,
.review-jump,
.cookie-mini-action,
.cookie-purchase-close,
.pet-town-onboarding-option,
.pet-town-shop-item
):not(.active):not(.selected):not([aria-pressed='true']):not(:disabled),
.pet-town-menu button:not(.active):not(.selected):not([aria-pressed='true']):not(:disabled) {
color:var(--text);
background:var(--card);
border-color:var(--line);
box-shadow:0 8px 18px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.03);
filter:none;
}
button:is(
.home-jiji-guide,
.home-pulse-item,
.notification-item,
.weekly-challenge-card,
.site-map-action,
.review-jump,
.cookie-mini-action,
.cookie-purchase-close,
.pet-town-onboarding-option,
.pet-town-shop-item
):not(.active):not(.selected):not([aria-pressed='true']):hover:not(:disabled),
.pet-town-menu button:not(.active):not(.selected):not([aria-pressed='true']):hover:not(:disabled) {
color:var(--accent2);
background:color-mix(in srgb,var(--accent2) 9%,var(--card));
border-color:color-mix(in srgb,var(--accent2) 42%,var(--line));
box-shadow:0 10px 22px color-mix(in srgb,var(--accent2) 12%,rgba(0,0,0,.14));
}
html[data-ui-variant='playful'] button:is(
.home-jiji-guide,
.home-pulse-item,
.notification-item,
.weekly-challenge-card,
.site-map-action,
.review-jump,
.cookie-mini-action,
.cookie-purchase-close,
.pet-town-onboarding-option,
.pet-town-shop-item
):not(.active):not(.selected):not([aria-pressed='true']):not(:disabled),
html[data-ui-variant='playful'] .pet-town-menu button:not(.active):not(.selected):not([aria-pressed='true']):not(:disabled) {
color:var(--text);
background:rgba(255,255,255,.82);
border-color:rgba(35,54,78,.18);
box-shadow:0 5px 0 rgba(35,54,78,.055),0 12px 22px rgba(57,75,105,.09);
}
html[data-ui-variant='playful'] button:is(
.home-jiji-guide,
.home-pulse-item,
.notification-item,
.weekly-challenge-card,
.site-map-action,
.review-jump,
.cookie-mini-action,
.cookie-purchase-close,
.pet-town-onboarding-option,
.pet-town-shop-item
):not(.active):not(.selected):not([aria-pressed='true']):hover:not(:disabled),
html[data-ui-variant='playful'] .pet-town-menu button:not(.active):not(.selected):not([aria-pressed='true']):hover:not(:disabled) {
color:#0f6762;
background:var(--playful-mint);
border-color:rgba(var(--accent2-rgb),.42);
box-shadow:0 7px 0 rgba(var(--accent2-rgb),.12),0 16px 28px rgba(57,75,105,.12);
}
button.snake-dir {
width:56px;
height:56px;
min-height:0;
padding:0;
color:var(--accent2);
background:var(--bg);
border-color:var(--line);
border-radius:var(--radius-control);
box-shadow:none;
}
button.snake-dir:hover:not(:disabled) {
color:var(--accent2);
background:color-mix(in srgb,var(--accent2) 8%,var(--bg));
border-color:var(--accent2);
box-shadow:0 0 10px color-mix(in srgb,var(--accent2) 35%,transparent);
}
button.tank-fire-pad {
color:#201500;
background:#e8a84c;
border-color:rgba(255,210,80,.75);
}
button.big-cookie {
width:min(240px,64vw);
min-height:0;
aspect-ratio:1;
padding:0;
color:inherit;
background:color-mix(in srgb,var(--gold) 10%,var(--panel));
border:0;
border-radius:50%;
box-shadow:0 18px 42px rgba(0,0,0,.14),0 0 54px rgba(255,216,77,.20), inset 0 1px 0 rgba(255,255,255,.16);
}
button.big-cookie:hover:not(:disabled) {
color:inherit;
background:color-mix(in srgb,var(--gold) 12%,var(--panel));
filter:saturate(1.1) brightness(1.04);
transform:translateY(-2px) scale(1.02);
}
button.cookie-building-buy {
color:var(--accent2);
background:color-mix(in srgb,var(--gold) 16%,var(--panel));
border-color:color-mix(in srgb,var(--gold) 48%,var(--line));
box-shadow:0 8px 18px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.14);
}
button.cookie-building-buy:hover:not(:disabled) {
color:var(--accent2);
background:color-mix(in srgb,var(--gold) 20%,var(--panel));
border-color:color-mix(in srgb,var(--gold) 60%,var(--line));
box-shadow:0 14px 28px rgba(0,0,0,.18),0 0 24px color-mix(in srgb,var(--gold) 28%,transparent);
}
.tank-upgrade-options button,
.tank-ability-row button,
.pet-town-actions button {
color:var(--text);
background:color-mix(in srgb,var(--panel) 62%,transparent);
border-color:color-mix(in srgb,var(--accent2) 34%,var(--line));
box-shadow:none;
}
.tank-upgrade-options button:hover:not(:disabled),
.tank-ability-row button:hover:not(:disabled),
.pet-town-actions button:hover:not(:disabled) {
color:var(--accent2);
background:color-mix(in srgb,var(--accent2) 10%,var(--panel));
border-color:var(--accent2);
box-shadow:0 12px 22px rgba(0,0,0,.18);
}
button.pet-town-onboarding-confirm {
color:#fffaf2;
background:#4d8c57;
border-color:#4d8c57;
box-shadow:0 8px 18px rgba(41,76,48,.22);
}
button.pet-town-use-button {
color:#26391f;
background:rgba(255,240,172,.9);
border-color:rgba(255,255,255,.28);
}
button.pet-town-auto-button {
color:#26391f;
background:rgba(201,238,183,.9);
border-color:rgba(255,255,255,.28);
}
html[data-ui-variant='playful'] button.small:not(.ghost):not(.full):not(.pet-upgrade-btn):not(.tank-fire-main):not(.tank-fire-pad),
html[data-ui-variant='playful'] button.cookie-buy-confirm:not(:disabled) {
color:#9f3d37;
background:var(--playful-rose);
border-color:rgba(var(--accent-rgb),.30);
box-shadow:0 3px 0 rgba(var(--accent-rgb),.11),0 10px 18px rgba(57,75,105,.07);
}
html[data-ui-variant='playful'] button.small:not(.ghost):not(.full):not(.pet-upgrade-btn):not(.tank-fire-main):not(.tank-fire-pad):hover:not(:disabled),
html[data-ui-variant='playful'] button.cookie-buy-confirm:hover:not(:disabled) {
color:#8f332e;
background:#ffe5e1;
border-color:rgba(var(--accent-rgb),.44);
box-shadow:0 5px 0 rgba(var(--accent-rgb),.13),0 14px 24px rgba(57,75,105,.10);
}
/* ===== v2026.09.08 guest readonly + responsive fixups ===== */
input.hp-field,
textarea.hp-field,
select.hp-field,
.hp-field {
position:absolute !important;
width:1px !important;
height:1px !important;
min-width:0 !important;
min-height:0 !important;
padding:0 !important;
border:0 !important;
margin:-1px !important;
overflow:hidden !important;
clip:rect(0 0 0 0) !important;
clip-path:inset(50%) !important;
white-space:nowrap !important;
opacity:0 !important;
}
.small,
.tab,
.theme-palette-toggle,
.theme-mode-btn,
.changelog-btn,
.home-filter,
.plaza-filter,
.admin-work-tab,
button#todayRefreshBtn,
button#weeklyChallengeBtn,
.home-actions #loginEntryBtn,
.home-actions #logoutBtn,
.home-zone-actions button,
.site-map-favorite,
.jiji-chat-head button,
.jiji-chat-form button,
.jiji-error-actions button,
.guest-login-btn {
min-height:44px !important;
}
.theme-palette-toggle,
.theme-mode-btn,
.home-filter,
.plaza-filter,
.admin-work-tab,
.app-nav-item,
.jiji-chat-head button,
.jiji-error-actions button {
min-width:44px;
}
.jiji-hide-btn {
width:44px;
height:44px;
min-width:44px;
min-height:44px;
right:0;
top:-14px;
font-size:18px;
}
.jiji-mascot {
max-width:min(360px, calc(100dvw - 24px));
box-sizing:border-box;
}
.jiji-bubble {
max-width:min(280px, calc(100dvw - 32px));
overflow-wrap:anywhere;
word-break:break-word;
}
.jiji-bubble > span {
display:block;
max-width:100%;
}
.jiji-error-actions {
flex-wrap:wrap;
}
.jiji-chat-panel {
width:min(340px, calc(100dvw - 32px));
max-width:calc(100dvw - 32px);
}
.readonly-notice {
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:12px;
align-items:center;
margin:12px 0 14px;
padding:13px 14px;
border:1px solid color-mix(in srgb,var(--accent2) 38%,var(--line-soft));
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--accent2) 10%,var(--card));
box-shadow:0 14px 32px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.055);
}
.readonly-notice div {
min-width:0;
display:flex;
flex-direction:column;
gap:4px;
}
.readonly-notice strong {
color:var(--text);
font-size:15px;
}
.readonly-notice span {
color:var(--muted);
font-size:13px;
line-height:1.45;
}
.readonly-login-btn {
white-space:nowrap;
min-width:112px;
min-height:44px;
}
body:not(.guest-readonly) .readonly-notice {
display:none !important;
}
body.guest-readonly .home-pulse,
body.guest-readonly #newcomerGuide,
body.guest-readonly .notification-center,
body.guest-readonly .weekly-event-hub,
body.guest-readonly #siteMapHub,
body.guest-readonly #homeJijiGuide,
body.guest-readonly .home-more-toggle,
body.guest-readonly .home-more-panel {
display:none !important;
}
body.guest-readonly .home-zone-actions button.login-required-action::after,
body.guest-readonly .home-zone-actions button.public-readonly-action::after {
position:static;
left:auto;
right:auto;
bottom:auto;
width:auto;
height:auto;
margin-left:4px;
padding:3px 6px;
border-radius:999px;
transform:none;
transform-origin:center;
font-size:10px;
font-weight:900;
line-height:1;
white-space:nowrap;
}
body.guest-readonly .home-zone-actions button.login-required-action::after {
content:'锁';
color:var(--gold);
background:color-mix(in srgb,var(--gold) 16%,transparent);
}
body.guest-readonly .home-zone-actions button.public-readonly-action::after {
content:'可看';
color:var(--accent2);
background:color-mix(in srgb,var(--accent2) 13%,transparent);
}
button[data-readonly-lock='1']::after {
content:'锁';
position:static;
display:inline-grid;
place-items:center;
min-width:18px;
height:18px;
margin-left:2px;
padding:0 5px;
border-radius:999px;
color:var(--gold);
background:color-mix(in srgb,var(--gold) 16%,transparent);
font-size:10px;
font-weight:900;
line-height:1;
}
body.guest-readonly .theme-switch,
body.guest-login-visible .theme-switch {
width:min(190px, 100%);
}
body.guest-readonly .hero .ui-variant-toggle,
body.guest-readonly .hero .liquid-glass-toggle,
body.guest-readonly .hero #jijiToggleBtn,
body.guest-login-visible .hero .ui-variant-toggle,
body.guest-login-visible .hero .liquid-glass-toggle,
body.guest-login-visible .hero #jijiToggleBtn {
display:none;
}
@media (min-width:641px) and (max-width:979px) {
body.guest-readonly .app-nav {
left:max(12px, env(safe-area-inset-left));
right:auto;
width:min(470px, calc(100dvw - 148px));
max-width:calc(100dvw - 148px);
}
body.guest-readonly .guest-login-btn {
left:auto;
right:max(14px, env(safe-area-inset-right));
bottom:max(14px, env(safe-area-inset-bottom));
}
.jiji-mascot:not(.is-positioned) {
right:max(18px, env(safe-area-inset-right));
bottom:max(104px, calc(94px + env(safe-area-inset-bottom)));
}
.jiji-chat-panel {
width:min(320px, calc(100dvw - 40px));
}
}
@media (max-width:640px) {
body.guest-readonly .theme-switch,
body.guest-login-visible .theme-switch {
grid-template-columns:repeat(2,minmax(0,1fr));
}
.theme-palette-toggle,
.theme-mode-btn,
html[data-ui-variant='playful'] .theme-palette-toggle,
html[data-ui-variant='playful'] .theme-mode-btn {
min-height:44px !important;
min-width:44px;
padding:0 8px;
font-size:12px;
}
.readonly-notice {
grid-template-columns:1fr;
}
.readonly-login-btn {
width:100%;
}
body.guest-readonly .app-nav {
left:max(10px, env(safe-area-inset-left));
right:max(10px, env(safe-area-inset-right));
width:auto;
max-width:none;
bottom:max(8px, env(safe-area-inset-bottom));
grid-template-columns:repeat(4,minmax(0,1fr));
}
body.guest-readonly .guest-login-btn {
left:auto;
right:max(10px, env(safe-area-inset-right));
bottom:max(74px, calc(66px + env(safe-area-inset-bottom)));
min-width:112px;
padding:0 10px;
}
.jiji-mascot,
.jiji-mascot:not(.is-positioned) {
right:max(8px, env(safe-area-inset-right));
bottom:max(76px, calc(68px + env(safe-area-inset-bottom)));
z-index:82;
transform:none;
transform-origin:right bottom;
}
.jiji-btn {
width:62px;
height:66px;
}
body.guest-readonly .jiji-mascot {
bottom:max(128px, calc(120px + env(safe-area-inset-bottom)));
}
}
@media (max-width:360px) {
body.guest-readonly .app-nav {
width:auto;
max-width:none;
}
body.guest-readonly .guest-login-btn {
min-width:104px;
font-size:12px;
}
}
.admin-stats-board {
display:grid;
gap:16px;
}
.admin-stat-section {
display:grid;
gap:8px;
}
.admin-stat-section > strong {
color:var(--admin-text);
font-size:13px;
font-weight:800;
}
.admin-stat-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:8px;
}
.admin-stat-card {
display:grid;
gap:3px;
padding:10px 12px;
border:1px solid var(--admin-line-soft);
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--admin-bg) 72%,transparent);
}
.admin-stat-card > span {
color:var(--admin-muted);
font-size:12px;
font-weight:800;
}
.admin-stat-card > strong {
color:var(--admin-text);
font-family:var(--font-number,inherit);
font-size:20px;
font-variant-numeric:tabular-nums;
}
.admin-stat-card > em {
color:var(--admin-muted);
font-size:11px;
font-style:normal;
}
.admin-stat-card.warn {
border-color:color-mix(in srgb,var(--admin-warn) 52%,var(--admin-line));
}
.admin-stat-card.danger {
border-color:color-mix(in srgb,var(--admin-danger) 52%,var(--admin-line));
}
.admin-trend {
display:flex;
align-items:flex-end;
gap:4px;
height:92px;
padding:8px 6px;
border:1px solid var(--admin-line-soft);
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--admin-bg) 72%,transparent);
}
.admin-trend-col {
flex:1 1 0;
display:flex;
align-items:flex-end;
gap:2px;
height:100%;
}
.admin-trend-col i,
.admin-trend-col b {
flex:1 1 0;
min-height:2px;
border-radius:2px 2px 0 0;
background:var(--admin-accent);
}
.admin-trend-col b {
background:color-mix(in srgb,var(--admin-accent) 38%,transparent);
}
.admin-asset-editor {
display:grid;
gap:8px;
margin-top:12px;
padding:12px;
border:1px solid var(--admin-line-soft);
border-radius:var(--radius-card);
background:color-mix(in srgb,var(--admin-bg) 72%,transparent);
}
.admin-asset-editor .admin-row {
align-items:flex-end;
}
.admin-asset-editor .admin-review-field {
flex:1 1 auto;
}
.admin-asset-editor select[multiple] {
min-width:150px;
}
.admin-list .row-item-main .pill {
margin-left:6px;
}
.session-item .row-item-main,
.pet-admin-item .row-item-main,
.announcement-item .row-item-main {
display:grid;
gap:2px;
}
/* ===== 个人主页优化阶段一：首屏名片 ===== */
.profile-card > .chat-top .chat-meta {
align-items:flex-start;
}
.profile-overview {
grid-column:1 / -1;
position:relative;
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:clamp(14px,3vw,24px);
align-items:center;
padding:clamp(16px,3vw,24px);
overflow:hidden;
isolation:isolate;
}
.profile-overview::before {
content:'';
position:absolute;
inset:0;
z-index:-1;
background:
radial-gradient(circle at 10% 10%, color-mix(in srgb,var(--accent) 18%,transparent), transparent 34%),
linear-gradient(135deg, color-mix(in srgb,var(--section-tint) 9%,transparent), transparent 56%);
pointer-events:none;
}
.profile-avatar-wrap {
align-items:flex-start;
justify-content:center;
}
.profile-card .profile-avatar {
width:clamp(76px,12vw,112px);
height:clamp(76px,12vw,112px);
flex-basis:clamp(76px,12vw,112px);
font-size:clamp(30px,5vw,44px);
}
.profile-identity {
gap:8px;
}
.profile-identity-head {
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}
.profile-hero-label {
min-height:28px;
display:inline-flex;
align-items:center;
padding:0 10px;
border:1px solid color-mix(in srgb,var(--accent2) 24%,var(--line));
border-radius:var(--radius-chip);
background:color-mix(in srgb,var(--accent2) 8%,transparent);
color:var(--accent2);
font-size:12px;
font-weight:900;
}
.profile-card .profile-identity > strong {
font-size:clamp(26px,4.4vw,40px);
line-height:1.08;
letter-spacing:-.03em;
}
.profile-hero-bio {
margin:0;
max-width:65ch;
color:var(--text);
font-size:clamp(14px,1.6vw,16px);
line-height:1.62;
white-space:pre-wrap;
}
.profile-quick-stats {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
max-width:680px;
}
.profile-quick-stat {
min-height:44px;
display:flex;
align-items:center;
justify-content:center;
padding:8px 10px;
border:1px solid color-mix(in srgb,var(--section-tint) 20%,var(--line));
border-radius:var(--radius-control);
background:color-mix(in srgb,var(--card) 72%,transparent);
color:var(--text);
font-size:12px;
font-weight:850;
text-align:center;
line-height:1.35;
}
#profileJoined.profile-quick-stat:empty {
display:none;
}
.profile-quick-actions {
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
}
.profile-quick-actions button {
min-height:44px;
white-space:nowrap;
}
@media (max-width:760px) {
.profile-overview {
grid-template-columns:1fr;
align-items:start;
}
.profile-overview .profile-avatar-wrap {
align-items:flex-start;
}
.profile-quick-stats {
grid-template-columns:repeat(2,minmax(0,1fr));
}
#profileJoined.profile-quick-stat {
grid-column:1 / -1;
}
.profile-quick-actions {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media (max-width:480px) {
.profile-quick-stats,
.profile-quick-actions {
grid-template-columns:1fr;
}
.profile-quick-actions button {
width:100%;
}
}
/* ===== theme switch regression fixes ===== */
.theme-switch .theme-swatches {
position:absolute;
top:calc(100% + 8px);
right:0;
left:auto;
bottom:auto;
z-index:40;
width:max-content;
max-width:min(320px, calc(100vw - 24px));
max-height:none;
padding:7px 10px;
overflow:visible;
opacity:0;
pointer-events:none;
transform:translateY(-6px) scale(.98);
border-color:transparent;
}
.theme-switch.open .theme-swatches {
opacity:1;
pointer-events:auto;
transform:translateY(0) scale(1);
border-color:var(--line);
}
@media (hover:hover) and (pointer:fine) {
.theme-switch:not(.open) .theme-swatches,
.theme-switch.hover-open:not(.open) .theme-swatches {
opacity:0;
pointer-events:none;
transform:translateY(-6px) scale(.98);
}
}
@media (max-width:640px) {
.theme-switch .theme-swatches {
position:static;
grid-column:1 / -1;
width:100%;
max-width:none;
max-height:0;
margin:0;
padding:0 12px;
overflow:hidden;
justify-content:center;
transform:none;
border-color:transparent;
}
.theme-switch.open .theme-swatches {
position:static;
max-height:76px;
padding:14px 12px;
transform:none;
}
}