/* MapleKiaw v2 · 颜色只在这里定义；局部世界主题也由根世界选择器限定。 */
html[data-world] {
  --font: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", system-ui, sans-serif;
  --mono: ui-monospace, Consolas, monospace;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s14: 56px;
  --s18: 72px;
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;
  --r-pill: 999px;
  --gold: #f7c948;
  --gold-deep: #d99a1c;
  --on-gold: #3a2a05;
  --gold-on-dark: #ffdc83;
  --ok: #1f7a55;
  --ok-on-dark: #6fe0b0;
  --warn: #8a5a00;
  --warn-tint: #fdf1d6;
  --danger: #b3403f;
  --danger-tint: #fbeae8;
  --parchment: #fbefd3;
  --parchment-line: #e3c98f;
  --parchment-ink: #5c4315;
  --on-primary: #ffffff;
  --dark-line: #ffffff1f;
  --tier-rare-dark: #8ec5ff;
  --tier-rare: #1f62a8;
  --tier-epic-dark: #c9a2ff;
  --tier-epic: #6a3db3;
  --tier-legendary-dark: #ffd66b;
  --tier-legendary: #8a6200;
  --tier-mythic-dark: #8ff0b4;
  --tier-mythic: #17734a;
  --item-rare: var(--tier-rare);
  --item-rare-dark: var(--tier-rare-dark);
  --item-epic: var(--tier-epic);
  --item-epic-dark: var(--tier-epic-dark);
  --item-unique: var(--tier-legendary);
  --item-unique-dark: var(--tier-legendary-dark);
  --item-legendary: var(--tier-mythic);
  --item-legendary-dark: var(--tier-mythic-dark);
  --locked-veil: color-mix(in srgb, var(--paper) 20%, transparent);
  --transparent: transparent;
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.039216), 0 6px 18px rgb(42 32 48 / 0.058824);
  --shadow-2: 0 8px 28px rgb(42 32 48 / 0.141176);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --fast: 120ms;
  --swap: 160ms;
  --sheet: 220ms;
  --header-height: 72px;
}

/* §4 的世界色板；选择世界卡片使用完全相同的色板。 */
html[data-world="hub"] {
  --ink: #2c293b;
  --muted: #686477;
  --ground: #f3f0ed;
  --paper: #fffdfa;
  --tint: #f1eaf8;
  --line: #ded8da;
  --primary: #6a4baa;
  --primary-2: #346f7a;
  --dark: #252337;
  --dark-raised: #33314b;
  --on-dark: #f4f2fa;
  --on-dark-muted: #c0bfd1;
}

html[data-world="083"],
html[data-world] .theme-083 {
  --ink: #3e2c31;
  --muted: #786465;
  --ground: #f9f1e7;
  --paper: #fffdf8;
  --tint: #faeadc;
  --line: #e7d9cb;
  --primary: #b94024;
  --primary-2: #a76422;
  --dark: #30232c;
  --dark-raised: #44323b;
  --on-dark: #fbf1ea;
  --on-dark-muted: #d4bec3;
}

html[data-world="232"],
html[data-world] .theme-232 {
  --ink: #272c48;
  --muted: #626981;
  --ground: #eef0f9;
  --paper: #fcfdff;
  --tint: #edeafa;
  --line: #dce0ee;
  --primary: #454bb4;
  --primary-2: #177e80;
  --dark: #202640;
  --dark-raised: #2c3454;
  --on-dark: #eef1fb;
  --on-dark-muted: #bdc7e1;
}

/* 派生颜色也在本文件声明，避免跨文件散落透明度与渐变。 */
html[data-world],
html[data-world] .theme-083,
html[data-world] .theme-232 {
  --gradient: linear-gradient(115deg, var(--primary), var(--primary-2));
  --focus: var(--primary);
  --header-paper: color-mix(in srgb, var(--paper) 88%, transparent);
  --control-line: color-mix(in srgb, var(--primary) 75%, var(--paper));
  --hover-paper: color-mix(in srgb, var(--ink) 4%, var(--paper));
  --hover-gold: color-mix(in srgb, var(--on-gold) 4%, var(--gold));
  --veil: color-mix(in srgb, var(--dark) 55%, transparent);
  --scene-wash: linear-gradient(90deg, color-mix(in srgb, var(--dark) 90%, transparent), color-mix(in srgb, var(--dark) 50%, transparent));
  --home-wash: linear-gradient(90deg, color-mix(in srgb, var(--dark) 86%, transparent), color-mix(in srgb, var(--dark) 78%, transparent) 62%, transparent);
  --home-mobile-wash: linear-gradient(180deg, color-mix(in srgb, var(--dark) 88%, transparent), color-mix(in srgb, var(--dark) 80%, transparent) 70%, transparent);
  --hero-panel-fill: color-mix(in srgb, var(--dark) 88%, transparent);
  --account-wash: linear-gradient(180deg, var(--dark), color-mix(in srgb, var(--dark) 92%, transparent) 240px, transparent 440px);
  --account-mobile-wash: linear-gradient(180deg, color-mix(in srgb, var(--dark) 94%, transparent), color-mix(in srgb, var(--dark) 88%, transparent) 80%, transparent);
  --chip-fade: linear-gradient(90deg, transparent, var(--ink) 8px, var(--ink) calc(100% - 16px), transparent);
  --preview-bar: color-mix(in srgb, var(--muted) 35%, var(--paper));
  --hub-wash: linear-gradient(180deg, color-mix(in srgb, var(--dark) 90%, transparent) calc(100% - 56px), transparent);
  --hub-mask: linear-gradient(90deg, transparent, var(--ink) 16%, var(--ink) 84%, transparent);
  --seam: linear-gradient(90deg, transparent, color-mix(in srgb, var(--dark) 25%, transparent), transparent);
  --scene-fade: linear-gradient(0deg, var(--dark), transparent);
  --inspector-fade: linear-gradient(0deg, var(--dark) 10%, transparent);
  --quiet-fill: color-mix(in srgb, var(--primary) 6%, var(--paper));
  --ink-gradient: var(--gradient);
}

html[data-world] .panel-dark,
html[data-world] .site-footer,
html[data-world] .scene-surface {
  --focus: var(--gold-on-dark);
}

@media (max-width: 860px) {
  html[data-world] { --header-height: 64px; }
}

/* 原像素画的色调由世界色板混色得到；SVG 只包含几何与变量引用。 */
html[data-world],
html[data-world] .theme-083,
html[data-world] .theme-232 {
  --art-083-0: color-mix(in srgb, var(--danger) 50%, var(--on-dark-muted));
  --art-083-1: color-mix(in srgb, var(--gold-deep) 45%, var(--danger-tint));
  --art-083-2: color-mix(in srgb, var(--gold-deep) 45%, var(--tier-epic));
  --art-083-3: color-mix(in srgb, var(--gold-on-dark) 70%, var(--danger-tint));
  --art-083-4: color-mix(in srgb, var(--tier-epic-dark) 55%, var(--tier-legendary));
  --art-083-5: color-mix(in srgb, var(--tier-epic-dark) 10%, var(--muted));
  --art-083-6: color-mix(in srgb, var(--tier-epic-dark) 20%, var(--dark-raised));
  --art-083-7: color-mix(in srgb, var(--parchment-line) 60%, var(--primary));
  --art-083-8: color-mix(in srgb, var(--danger) 65%, var(--parchment-line));
  --art-083-9: color-mix(in srgb, var(--gold) 65%, var(--tier-epic-dark));
  --art-083-10: color-mix(in srgb, var(--parchment-ink) 60%, var(--tier-epic));
  --art-083-11: color-mix(in srgb, var(--danger) 90%, var(--tier-rare-dark));
  --art-083-12: color-mix(in srgb, var(--warn-tint) 40%, var(--tier-legendary-dark));
  --art-083-13: color-mix(in srgb, var(--warn) 55%, var(--tier-epic));
  --art-083-14: color-mix(in srgb, var(--tier-epic) 45%, var(--primary-2));
  --art-083-15: color-mix(in srgb, var(--warn-tint) 65%, var(--danger));
  --art-083-16: color-mix(in srgb, var(--ground) 55%, var(--primary-2));
  --art-083-17: color-mix(in srgb, var(--parchment-ink) 60%, var(--tier-epic));
  --art-083-18: color-mix(in srgb, var(--danger) 65%, var(--tier-legendary-dark));
  --art-083-19: color-mix(in srgb, var(--gold-on-dark) 60%, var(--primary));
  --art-083-20: color-mix(in srgb, var(--danger) 80%, var(--parchment-line));
  --art-083-21: color-mix(in srgb, var(--dark-raised) 90%, var(--on-dark-muted));
  --art-083-22: color-mix(in srgb, var(--danger) 90%, var(--tier-mythic-dark));
  --art-083-23: color-mix(in srgb, var(--danger) 60%, var(--tier-legendary-dark));
  --art-083-24: color-mix(in srgb, var(--tier-rare) 25%, var(--primary));
  --art-083-25: color-mix(in srgb, var(--parchment-ink) 60%, var(--tier-epic));
  --art-083-26: color-mix(in srgb, var(--on-gold) 70%, var(--tier-epic-dark));
  --art-083-27: color-mix(in srgb, var(--danger) 15%, var(--tier-legendary-dark));
  --art-083-28: color-mix(in srgb, var(--gold-on-dark) 80%, var(--paper));
  --art-083-29: color-mix(in srgb, var(--gold-on-dark) 55%, var(--danger));
  --art-232-0: var(--dark);
  --art-232-1: color-mix(in srgb, var(--ok) 50%, var(--tier-epic));
  --art-232-2: color-mix(in srgb, var(--ok) 65%, var(--tier-rare-dark));
  --art-232-3: color-mix(in srgb, var(--ok-on-dark) 90%, var(--tier-rare-dark));
  --art-232-4: color-mix(in srgb, var(--tier-epic-dark) 80%, var(--primary-2));
  --art-232-5: color-mix(in srgb, var(--ok-on-dark) 80%, var(--tier-rare));
  --art-232-6: color-mix(in srgb, var(--warn-tint) 45%, var(--parchment-line));
  --art-232-7: color-mix(in srgb, var(--tint) 80%, var(--primary-2));
  --art-232-8: color-mix(in srgb, var(--ok-on-dark) 25%, var(--warn-tint));
  --art-232-9: color-mix(in srgb, var(--tier-rare) 20%, var(--ink));
  --art-232-10: color-mix(in srgb, var(--primary) 20%, var(--dark-raised));
  --art-232-11: color-mix(in srgb, var(--tier-rare) 15%, var(--dark));
  --art-232-12: color-mix(in srgb, var(--tier-rare-dark) 15%, var(--dark-raised));
  --art-232-13: color-mix(in srgb, var(--ok-on-dark) 85%, var(--tier-epic));
  --art-232-14: color-mix(in srgb, var(--muted) 85%, var(--primary-2));
  --art-232-15: color-mix(in srgb, var(--tier-rare-dark) 35%, var(--ink));
  --art-232-16: color-mix(in srgb, var(--tier-rare-dark) 30%, var(--dark-raised));
  --art-232-17: color-mix(in srgb, var(--tier-rare) 40%, var(--tier-epic-dark));
  --art-232-18: color-mix(in srgb, var(--line) 60%, var(--primary));
  --art-232-19: color-mix(in srgb, var(--ok-on-dark) 40%, var(--tier-epic));
  --art-232-20: color-mix(in srgb, var(--tier-rare) 25%, var(--tint));
  --art-232-21: color-mix(in srgb, var(--tier-rare) 10%, var(--on-dark));
  --art-232-22: color-mix(in srgb, var(--tier-epic-dark) 15%, var(--primary-2));
  --art-232-23: color-mix(in srgb, var(--ok-on-dark) 60%, var(--tier-rare));
  --art-232-24: color-mix(in srgb, var(--ok-on-dark) 60%, var(--paper));
  --art-232-25: color-mix(in srgb, var(--on-primary) 70%, var(--tier-mythic-dark));
  --art-232-26: color-mix(in srgb, var(--warn) 30%, var(--tier-rare-dark));
  --art-232-27: color-mix(in srgb, var(--tier-rare-dark) 10%, var(--muted));
  --art-232-28: color-mix(in srgb, var(--gold-on-dark) 35%, var(--parchment-line));
  --art-232-29: color-mix(in srgb, var(--tier-epic-dark) 30%, var(--tier-mythic));
  --art-232-30: color-mix(in srgb, var(--ok-on-dark) 45%, var(--dark-raised));
  --art-232-31: color-mix(in srgb, var(--parchment) 35%, var(--primary-2));
  --art-232-32: color-mix(in srgb, var(--ok-on-dark) 75%, var(--tier-epic-dark));
}