:root {
  --ink: #23306e;
  --accent: #ff5c80;
  --glass: rgba(255, 255, 255, 0.22);
  --glass-edge: rgba(255, 255, 255, 0.55);
  --font: 'M PLUS Rounded 1c', 'Zen Maru Gothic', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}
body[data-time='sunset'] { --ink: #5a2a5e; --accent: #ff7a59; }
body[data-time='night'] { --ink: #1b2256; --accent: #ffd36b; --glass: rgba(20, 30, 80, 0.3); --glass-edge: rgba(190, 210, 255, 0.35); }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #bfe3ff; font-family: var(--font); color: #fff; }
#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
#stage:active { cursor: grabbing; }

.vignette {
  position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 60%, rgba(20, 30, 90, 0.22) 100%);
}

/* —— 标题：日漫 Key Visual 风格描边字 —— */
.title { position: fixed; left: clamp(20px, 4vw, 64px); top: clamp(18px, 4.5vh, 56px); pointer-events: none; }
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font: 800 12px/1 var(--font); letter-spacing: 0.32em;
  padding: 7px 14px 7px 10px; border-radius: 999px;
  background: var(--ink); color: #fff; box-shadow: 0 6px 18px rgba(20, 30, 90, 0.25);
}
.kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35); }
.kicker b { color: var(--accent); font-weight: 800; }
.title h1 { margin-top: 14px; font-weight: 800; line-height: 1.02; letter-spacing: 0.02em; isolation: isolate; }
/* 描边字：伪元素在底层画粗描边，本体在上层填色 */
.o { position: relative; display: block; color: #fff; }
.o::before {
  content: attr(data-t); position: absolute; left: 0; top: 0; z-index: -1;
  color: var(--ink); -webkit-text-stroke: var(--sw, 8px) var(--ink);
  text-shadow: 0 var(--sd, 5px) 0 var(--ink), 0 14px 26px rgba(20, 30, 90, 0.35);
}
.title h1 .o { font-size: clamp(26px, 3.6vw, 50px); }
.title h1 .big { --sw: 12px; --sd: 7px; font-size: clamp(56px, 8.4vw, 124px); margin-left: 0.5em; letter-spacing: 0.04em; }
.big b {
  font-weight: 800;
  background: linear-gradient(180deg, #ffffff 40%, #d4ebff 68%, #ffd9e6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sub {
  margin: 12px 0 0 6px; display: inline-block; font: 700 clamp(13px, 1.2vw, 17px)/1 var(--font);
  letter-spacing: 0.4em; color: var(--ink); background: rgba(255, 255, 255, 0.85);
  padding: 8px 12px 8px 16px; border-radius: 4px; transform: skewX(-8deg);
  box-shadow: 4px 4px 0 var(--accent);
}

.vertical {
  position: fixed; right: clamp(18px, 3.4vw, 54px); top: clamp(24px, 6vh, 70px);
  writing-mode: vertical-rl; pointer-events: none; display: flex; gap: 14px; isolation: isolate;
  font: 800 clamp(18px, 1.9vw, 28px)/1.2 'Zen Maru Gothic', var(--font); letter-spacing: 0.3em;
}
.vertical .o { --sw: 6px; --sd: 0px; }
.vertical .o::before { top: 0; left: 0; }
.vertical .small { --sw: 4px; font-size: clamp(11px, 0.95vw, 14px); letter-spacing: 0.25em; padding-top: 3.2em; }
.vertical .small::before { top: 3.2em; }

/* —— 底部控制坞 —— */
.dock {
  position: fixed; left: 50%; bottom: clamp(18px, 4vh, 40px); transform: translateX(-50%);
  display: flex; gap: 12px; align-items: center;
}
.seg, .tools {
  display: flex; gap: 4px; padding: 5px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--glass-edge);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 10px 30px rgba(20, 30, 90, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.dock button {
  all: unset; cursor: pointer; display: flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 999px; font: 700 14px/1 var(--font); letter-spacing: 0.12em;
  color: #fff; text-shadow: 0 1px 3px rgba(20, 30, 90, 0.45); transition: all 0.25s ease;
}
.dock button em { font-style: normal; font-size: 13px; opacity: 0.9; }
.dock button:hover { background: rgba(255, 255, 255, 0.2); }
.dock button.on { background: #fff; color: var(--ink); text-shadow: none; box-shadow: 0 4px 12px rgba(20, 30, 90, 0.2); }
.dock button.on em { color: var(--accent); }
.tools button { padding: 9px 13px; }

.hint {
  position: fixed; left: clamp(20px, 4vw, 64px); bottom: clamp(22px, 4.4vh, 46px);
  font: 500 12px/1.6 var(--font); letter-spacing: 0.1em; color: #fff; opacity: 0.9;
  text-shadow: 0 1px 4px rgba(20, 30, 90, 0.6); max-width: 250px; pointer-events: none;
}
.hint b { color: #fff; background: var(--accent); padding: 1px 6px; border-radius: 4px; text-shadow: none; font-weight: 700; }

#toast {
  position: fixed; left: 50%; top: 20%; transform: translate(-50%, 10px) scale(0.9); opacity: 0;
  font: 800 18px/1 var(--font); letter-spacing: 0.08em; color: var(--ink);
  background: #fff; padding: 12px 22px; border-radius: 18px; pointer-events: none;
  box-shadow: 0 6px 0 var(--accent), 0 16px 30px rgba(20, 30, 90, 0.25);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }

body > :not(canvas):not(.loader):not(#toast) { transition: opacity 0.5s ease, transform 0.5s ease; }
body.clean .title, body.clean .vertical, body.clean .hint { opacity: 0; }
body.clean .dock { opacity: 0.12; }
body.clean .dock:hover { opacity: 1; }

/* —— 加载 —— */
.loader {
  position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px;
  background: linear-gradient(180deg, #4f9cf0, #d6efff); z-index: 10; transition: opacity 0.8s ease 0.2s, visibility 0.8s ease 0.2s;
}
.loader p { font: 800 15px/1 var(--font); letter-spacing: 0.3em; color: #fff; text-shadow: 0 2px 8px rgba(20, 30, 90, 0.35); }
.paw { position: relative; width: 64px; height: 64px; animation: bob 0.9s ease-in-out infinite alternate; }
.paw i, .paw b { position: absolute; background: #fff; border-radius: 50%; box-shadow: 0 4px 0 rgba(35, 48, 110, 0.35); }
.paw b { width: 34px; height: 28px; left: 15px; top: 30px; border-radius: 50% 50% 45% 45%; }
.paw i { width: 14px; height: 17px; }
.paw i:nth-child(1) { left: 4px; top: 18px; }
.paw i:nth-child(2) { left: 17px; top: 5px; }
.paw i:nth-child(3) { left: 33px; top: 5px; }
.paw i:nth-child(4) { left: 46px; top: 18px; }
@keyframes bob { to { transform: translateY(-10px) rotate(-8deg); } }
body.ready .loader { opacity: 0; visibility: hidden; }

@media (max-width: 720px) {
  .vertical { display: none; }
  .hint { display: none; }
  .dock { flex-direction: column; gap: 8px; }
  .dock button span { display: none; }
  .seg button span { display: inline; }
}