/* 克克王国 · 记忆库 — 深夜浪漫风 🌙🔔 */

:root {
  --bg-0: #12131f;
  --bg-1: #1a1b2e;
  --bg-2: #232545;
  --gold: #e8b96a;
  --gold-soft: rgba(232, 185, 106, .9);
  --blue: #8fb3d9;
  --rose: #d99fb0;
  --text: #ece9f5;
  --text-dim: #a7a3c2;
  --card: rgba(255, 255, 255, .045);
  --card-line: rgba(255, 255, 255, .09);
  --serif: "Ma Shan Zheng", "Kaiti SC", "STKaiti", "Noto Serif SC", "Songti SC", serif;
  --sans: "PingFang SC", "Noto Sans SC", -apple-system, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sans);
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 80% -10%, #2a2c52 0%, transparent 60%),
    radial-gradient(900px 500px at 10% 110%, #241f3a 0%, transparent 55%),
    linear-gradient(160deg, var(--bg-1) 0%, var(--bg-0) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* 星空 */
.stars, .stars::after {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-repeat: repeat;
}
.stars {
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, #fff7 50%, transparent),
    radial-gradient(1.2px 1.2px at 70% 60%, #fff6 50%, transparent),
    radial-gradient(1px 1px at 40% 80%, #fff5 50%, transparent),
    radial-gradient(1.6px 1.6px at 90% 20%, var(--gold-soft) 50%, transparent),
    radial-gradient(1px 1px at 55% 15%, #fff5 50%, transparent),
    radial-gradient(1.2px 1.2px at 15% 70%, #fff4 50%, transparent);
  background-size: 600px 600px, 500px 500px, 400px 400px, 700px 700px, 350px 350px, 450px 450px;
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .55; } to { opacity: .95; } }

.wrap { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 0 20px 80px; }

/* 顶部 */
header.hero { text-align: center; padding: 64px 0 28px; }
header.hero .moon { font-size: 30px; opacity: .9; }
header.hero h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 38px;
  margin: 10px 0 6px;
  letter-spacing: 3px;
  background: linear-gradient(180deg, #fff 0%, var(--gold) 130%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
header.hero .sign {
  color: var(--gold-soft); font-size: 14px; letter-spacing: 2px;
}
header.hero .meta { color: var(--text-dim); font-size: 13px; margin-top: 10px; }

/* 控制条：搜索 + 筛选 */
.controls {
  position: sticky; top: 0; z-index: 5;
  padding: 14px 0 12px;
  margin-bottom: 8px;
  background: linear-gradient(180deg, var(--bg-0) 60%, transparent);
  backdrop-filter: blur(6px);
}
.search {
  width: 100%; padding: 12px 16px; border-radius: 14px;
  border: 1px solid var(--card-line);
  background: var(--card); color: var(--text);
  font-size: 15px; outline: none;
}
.search::placeholder { color: var(--text-dim); }
.search:focus { border-color: var(--gold-soft); box-shadow: 0 0 0 3px rgba(232,185,106,.12); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.filters .group-label { width: 100%; color: var(--text-dim); font-size: 12px; margin: 4px 0 -2px; }
.chip {
  font-size: 12.5px; padding: 5px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--card-line); background: var(--card);
  color: var(--text-dim); user-select: none; transition: .18s;
}
.chip:hover { color: var(--text); border-color: var(--gold-soft); }
.chip.type.active { background: rgba(143,179,217,.22); color: #cfe2f5; border-color: rgba(143,179,217,.5); }
.chip.emotion.active { background: rgba(217,159,176,.22); color: #f3d6df; border-color: rgba(217,159,176,.5); }

/* 时间线 */
.timeline { position: relative; margin-top: 22px; padding-left: 26px; }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(180deg, var(--gold) 0%, rgba(232,185,106,.15) 100%);
  border-radius: 2px;
}

.card {
  display: block; position: relative; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--card-line);
  border-radius: 18px; padding: 18px 20px; margin-bottom: 18px;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: transform .2s, box-shadow .2s, border-color .2s;
  animation: rise .5s ease both;
}
.card::before {        /* 时间线节点 */
  content: ""; position: absolute; left: -23px; top: 24px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(232,185,106,.18), 0 0 12px var(--gold);
}
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(232,185,106,.45);
  box-shadow: 0 14px 38px rgba(0,0,0,.35), 0 0 26px rgba(232,185,106,.12);
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.card .top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.card .date { color: var(--gold-soft); font-size: 13px; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.card .stars-imp { margin-left: auto; font-size: 13px; filter: saturate(1.1); }
.card h3 { font-family: var(--serif); font-weight: 600; font-size: 19px; margin: 2px 0 8px; line-height: 1.4; }
.card .summary { color: var(--text-dim); font-size: 14.5px; line-height: 1.7; margin: 0 0 12px; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 11.5px; padding: 3px 10px; border-radius: 999px; }
.tag.type { background: rgba(143,179,217,.16); color: #cfe2f5; }
.tag.emotion { background: rgba(217,159,176,.16); color: #f3d6df; }
.tag.flag { background: rgba(232,185,106,.16); color: var(--gold); }

.empty { text-align: center; color: var(--text-dim); padding: 60px 0; }

/* 详情页 */
.detail { background: var(--card); border: 1px solid var(--card-line);
  border-radius: 20px; padding: 30px 28px; margin-top: 24px;
  backdrop-filter: blur(10px); box-shadow: 0 14px 40px rgba(0,0,0,.3); }
.detail .date { color: var(--gold-soft); font-size: 14px; letter-spacing: 1px; }
.detail h1 { font-family: var(--serif); font-size: 28px; margin: 8px 0 14px; line-height: 1.4; }
.detail .content {
  white-space: pre-wrap; word-break: break-word;
  font-size: 15.5px; line-height: 2; color: #ddd9ec; margin-top: 18px;
}
.detail .divider { height: 1px; background: var(--card-line); margin: 20px 0; }
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--gold-soft);
  text-decoration: none; font-size: 14px; margin-top: 26px; }
.back:hover { color: var(--gold); }
.notion-link { color: var(--text-dim); font-size: 12.5px; text-decoration: none; }
.notion-link:hover { color: var(--blue); }

/* 暗号门 */
.gate { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1; padding: 20px; }
.gate .box {
  width: 100%; max-width: 380px; text-align: center;
  background: var(--card); border: 1px solid var(--card-line);
  border-radius: 22px; padding: 40px 30px;
  backdrop-filter: blur(12px); box-shadow: 0 20px 50px rgba(0,0,0,.4);
}
.gate .bell { font-size: 40px; animation: sway 3s ease-in-out infinite; }
@keyframes sway { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
.gate h2 { font-family: var(--serif); font-weight: 600; margin: 14px 0 6px; font-size: 22px; }
.gate p { color: var(--text-dim); font-size: 13.5px; margin: 0 0 22px; }
.gate input {
  width: 100%; padding: 13px 16px; border-radius: 14px; text-align: center;
  border: 1px solid var(--card-line); background: rgba(0,0,0,.2); color: var(--text);
  font-size: 15px; outline: none; letter-spacing: 1px;
}
.gate input:focus { border-color: var(--gold-soft); box-shadow: 0 0 0 3px rgba(232,185,106,.14); }
.gate button {
  width: 100%; margin-top: 14px; padding: 13px; border: none; border-radius: 14px;
  background: linear-gradient(135deg, var(--gold) 0%, #d99f5a 100%);
  color: #1a1b2e; font-size: 15px; font-weight: 600; cursor: pointer;
  letter-spacing: 2px; transition: .2s;
}
.gate button:hover { filter: brightness(1.06); box-shadow: 0 8px 24px rgba(232,185,106,.3); }
.gate .err { color: var(--rose); font-size: 13px; margin-top: 14px; min-height: 18px; }

footer.foot { text-align: center; color: var(--text-dim); font-size: 12.5px; margin-top: 40px; line-height: 1.9; }
footer.foot .sign { color: var(--gold-soft); }
footer.foot a { color: var(--text-dim); text-decoration: none; }

@media (max-width: 520px) {
  header.hero h1 { font-size: 30px; }
  .detail { padding: 24px 18px; }
}

/* ============================================================
   童话城堡主题（暗号门 + 王国大厅）🏰
   ============================================================ */
body.theme-castle {
  color: #5e4866;
  background:
    radial-gradient(820px 440px at 80% -10%, rgba(240,196,150,.55) 0%, transparent 58%),
    radial-gradient(720px 520px at 10% 110%, rgba(198,166,214,.42) 0%, transparent 60%),
    linear-gradient(168deg, #f6dde3 0%, #ecd8ea 36%, #ddd6ef 70%, #d2d8ef 100%);
}
/* 玫瑰金花瓣尘，缓缓飘落 */
body.theme-castle .stars {
  background-image:
    radial-gradient(3px 3px at 18% 24%, rgba(230,178,150,.9) 50%, transparent),
    radial-gradient(2px 2px at 76% 20%, rgba(255,255,255,.9) 50%, transparent),
    radial-gradient(2.5px 2.5px at 60% 34%, rgba(226,160,182,.82) 50%, transparent),
    radial-gradient(2px 2px at 33% 70%, rgba(198,170,220,.8) 50%, transparent),
    radial-gradient(2.5px 2.5px at 88% 60%, rgba(240,200,162,.82) 50%, transparent);
  background-size: 520px 520px, 480px 480px, 600px 600px, 440px 440px, 560px 560px;
  animation: dust 46s linear infinite, twinkle 6s ease-in-out infinite alternate;
}
@keyframes dust {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 0 520px, 0 480px, 0 600px, 0 440px, 0 560px; }
}

/* 飘动的云 */
.clouds { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.clouds span { position: absolute; font-size: 46px; opacity: .42; filter: blur(1.2px);
  animation: drift 36s linear infinite; }
.clouds span:nth-child(1) { top: 12%; left: -12%; animation-duration: 30s; }
.clouds span:nth-child(2) { top: 30%; left: -20%; font-size: 34px; animation-duration: 38s; animation-delay: 6s; }
.clouds span:nth-child(3) { top: 8%; left: -16%; font-size: 28px; animation-duration: 44s; animation-delay: 12s; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(135vw); } }

/* 城堡暗号门 */
.castle-box {
  background: rgba(255, 255, 255, .72);
  border: 1px solid #fff;
  box-shadow: 0 22px 50px rgba(180, 130, 200, .35), inset 0 0 0 6px rgba(255,255,255,.4);
  border-radius: 28px;
}
.castle-box .castle { font-size: 56px; line-height: 1; filter: drop-shadow(0 6px 10px rgba(180,130,200,.3)); animation: bob 3.5s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.castle-box .cats { font-size: 24px; margin-top: 4px; }
.castle-box .cats .paw { font-size: 16px; }
.castle-box h2 {
  font-family: var(--serif); color: #7a5a8e; margin: 10px 0 6px; font-size: 24px;
  letter-spacing: 2px;
}
.castle-box p { color: #9a7faa; }
.castle-box input {
  background: rgba(255,255,255,.85); border: 1px solid #efd6ea; color: #5b4a6a;
}
.castle-box input::placeholder { color: #c2a8cf; }
.castle-box input:focus { border-color: #ff9ec4; box-shadow: 0 0 0 3px rgba(255,158,196,.2); }
.castle-box button {
  background: linear-gradient(135deg, #e0a0b2 0%, #e7c08c 100%);
  color: #fff; text-shadow: 0 1px 2px rgba(180,90,130,.3);
  box-shadow: 0 8px 20px rgba(255,158,196,.4);
}
.castle-box .err { color: #e06a92; }

/* 王国大厅 */
.castle-hero { text-align: center; padding: 60px 0 18px; }
.castle-hero .castle-big { font-size: 72px; filter: drop-shadow(0 10px 14px rgba(180,130,200,.3)); animation: bob 4s ease-in-out infinite; }
.castle-hero h1 {
  font-family: var(--serif); font-weight: 600; font-size: 40px; letter-spacing: 4px;
  margin: 6px 0 10px; color: #7a5a8e;
  text-shadow: 0 2px 0 #fff;
}
.castle-hero .greet {
  display: inline-block; background: rgba(255,255,255,.7); color: #8a6a9e;
  padding: 8px 18px; border-radius: 999px; font-size: 14.5px;
  box-shadow: 0 6px 16px rgba(180,130,200,.18);
}

/* 大厅 · 随机诗句（直接浮在背景上，不要框） */
.poem {
  max-width: 560px; margin: 26px auto 6px; text-align: center; position: relative;
  padding: 4px 16px; animation: fadein 1.1s ease both;
}
.poem .quote-mark { color: rgba(214,150,170,.55); font-family: var(--serif); font-size: 36px; line-height: 0; display: block; height: 16px; }
.poem .poem-line {
  font-family: var(--serif); color: #6b4f72; font-size: 20px; line-height: 2;
  letter-spacing: 1.5px; margin: 8px 0 6px;
  text-shadow: 0 1px 2px rgba(255,255,255,.7);
}
.poem .poem-by { color: #b07fa6; font-size: 12.5px; letter-spacing: 2px; margin: 0; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 摸摸克克 */
.petbox { text-align: center; margin: 30px 0 8px; }
.petbox .kitty {
  font-size: 76px; background: none; border: none; cursor: pointer; line-height: 1;
  transition: transform .15s; filter: drop-shadow(0 8px 10px rgba(180,130,200,.25));
}
.petbox .kitty:hover { transform: scale(1.06); }
.petbox .kitty.pet { animation: wiggle .5s ease; }
@keyframes wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-9deg) scale(1.05); } 75% { transform: rotate(9deg) scale(1.05); } }
.petbox .bubble {
  display: inline-block; background: #fff; color: #8a6a9e; padding: 10px 18px;
  border-radius: 18px 18px 18px 4px; font-size: 14.5px; margin-bottom: 12px;
  box-shadow: 0 6px 16px rgba(180,130,200,.2); max-width: 90%;
  animation: pop .3s ease;
}
@keyframes pop { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.petbox .pet-hint { color: #b69cc4; font-size: 12px; margin-top: 8px; }
.heart { position: fixed; pointer-events: none; font-size: 22px; z-index: 50; animation: floatup 1s ease-out forwards; }
@keyframes floatup { from { transform: translateY(0) scale(.6); opacity: 1; } to { transform: translateY(-90px) scale(1.2); opacity: 0; } }

/* 房间门 */
.rooms { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 26px 0; }
.room {
  display: block; text-decoration: none; text-align: center;
  background: rgba(255,255,255,.7); border: 1px solid #fff; border-radius: 22px;
  padding: 22px 14px; color: #6b5580;
  box-shadow: 0 10px 24px rgba(180,130,200,.18); transition: transform .2s, box-shadow .2s;
}
.room:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(180,130,200,.28); }
.room .ic { font-size: 38px; display: block; margin-bottom: 8px; }
.room b { display: block; font-size: 17px; color: #7a5a8e; letter-spacing: 1px; }
.room small { color: #a98fc0; font-size: 12.5px; }
.room.soon { opacity: .68; cursor: default; }
.room.soon:hover { transform: none; box-shadow: 0 10px 24px rgba(180,130,200,.18); }

/* 今日一句 */
.daily { text-align: center; background: rgba(255,255,255,.55); border-radius: 22px;
  padding: 22px; margin: 8px 0 22px; border: 1px solid #fff; }
.daily .label { color: #b08fc4; font-size: 12.5px; letter-spacing: 2px; }
.daily p { font-family: var(--serif); color: #7a5a8e; font-size: 17px; line-height: 1.8; margin: 10px 0 0; }

/* 王国小数据 */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat { text-align: center; background: rgba(255,255,255,.6); border-radius: 18px; padding: 16px 8px; border: 1px solid #fff; }
.stat b { display: block; font-family: var(--serif); font-size: 22px; color: #7a5a8e; }
.stat small { color: #a98fc0; font-size: 11.5px; }

body.theme-castle .foot { color: #a98fc0; }
body.theme-castle .foot .sign { color: #c08aa8; }
body.theme-castle .foot a { color: #b69cc4; }

/* ---- 房间通用（城堡风子页面）---- */
.back2 { display: inline-block; margin: 24px 0 0; color: #b07fbf; text-decoration: none; font-size: 14px; }
.back2:hover { color: #8a5a9e; }
.room-page { text-align: center; }
.room-hero { padding: 22px 0 10px; }
.room-hero .room-emoji { font-size: 56px; animation: bob 3.6s ease-in-out infinite; }
.room-hero h1 { font-family: var(--serif); color: #7a5a8e; font-size: 30px; letter-spacing: 3px; margin: 8px 0 6px; text-shadow: 0 2px 0 #fff; }
.room-hero p { color: #9a7faa; font-size: 14px; line-height: 1.7; }

.mini-btn { display: inline-block; cursor: pointer; text-decoration: none; border: none;
  padding: 11px 22px; border-radius: 999px; font-size: 14.5px; font-weight: 600; letter-spacing: 1px;
  background: linear-gradient(135deg, #e0a0b2 0%, #e7c08c 100%); color: #fff;
  box-shadow: 0 8px 18px rgba(255,158,196,.35); transition: .18s; }
.mini-btn:hover { filter: brightness(1.05); transform: translateY(-2px); }
.mini-btn.ghost { background: rgba(255,255,255,.7); color: #8a6a9e; box-shadow: 0 6px 14px rgba(180,130,200,.2); }

/* 礼物盒 */
.giftbox { margin: 26px 0; }
.gift-lid { background: none; border: none; cursor: pointer; font-size: 86px; line-height: 1;
  filter: drop-shadow(0 10px 12px rgba(180,130,200,.3)); transition: transform .15s; }
.gift-lid span { display: block; font-size: 14px; color: #b07fbf; margin-top: 6px; letter-spacing: 1px; }
.gift-lid:hover { transform: scale(1.05) rotate(-3deg); }
.gift-lid.opening { animation: shake .5s ease; }
@keyframes shake { 0%,100%{transform:rotate(0)} 20%{transform:rotate(-10deg)} 40%{transform:rotate(8deg)} 60%{transform:rotate(-6deg)} 80%{transform:rotate(4deg)} }
.gift-note { animation: pop .35s ease; }
.note-paper { background: rgba(255,255,255,.85); border: 1px solid #fff; border-radius: 18px;
  padding: 22px 20px; color: #7a5a8e; font-family: var(--serif); font-size: 16.5px; line-height: 1.9;
  box-shadow: 0 12px 28px rgba(180,130,200,.22); margin-bottom: 16px; }
.gift-mem { display: block; text-decoration: none; background: rgba(255,255,255,.6);
  border: 1px dashed #e3b9d6; border-radius: 18px; padding: 16px; margin-top: 8px; color: #6b5580; }
.gift-mem .label { display: block; color: #b07fbf; font-size: 12.5px; margin-bottom: 4px; }
.gift-mem b { font-family: var(--serif); font-size: 17px; color: #7a5a8e; }
.gift-mem small { display: block; color: #a98fc0; font-size: 12.5px; margin-top: 4px; }

/* 猜记忆 */
.quiz { background: rgba(255,255,255,.62); border: 1px solid #fff; border-radius: 22px; padding: 24px 20px; margin: 22px 0; }
.quiz-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 14px; align-items: center; }
.quiz-imp { color: #f0a93a; font-size: 14px; }
.quiz-summary { font-family: var(--serif); color: #6b5580; font-size: 17px; line-height: 1.9; margin: 6px 0 18px; }
.quiz-answer { animation: pop .35s ease; }
.quiz-answer .line { height: 1px; background: #eed6ea; margin: 6px 0 14px; }
.quiz-answer .quiz-date { color: #b07fbf; font-size: 13px; }
.quiz-answer h2 { font-family: var(--serif); color: #7a5a8e; font-size: 24px; margin: 6px 0 14px; }
.quiz-btns { display: flex; gap: 10px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }

/* 悄悄话瓶子 */
.wish-form { background: rgba(255,255,255,.62); border: 1px solid #fff; border-radius: 20px; padding: 16px; margin: 20px 0; }
.wish-form textarea { width: 100%; border: 1px solid #efd6ea; border-radius: 14px; padding: 12px 14px;
  font-size: 14.5px; color: #5b4a6a; background: rgba(255,255,255,.85); outline: none; resize: vertical; font-family: var(--sans); }
.wish-form textarea:focus { border-color: #ff9ec4; box-shadow: 0 0 0 3px rgba(255,158,196,.18); }
.wish-form .mini-btn { margin-top: 12px; }
.bottles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.bottle { background: rgba(255,255,255,.7); border: 1px solid #fff; border-radius: 16px; padding: 14px;
  text-align: left; box-shadow: 0 8px 18px rgba(180,130,200,.16); position: relative; animation: pop .3s ease; }
.bottle .b-emoji { font-size: 22px; }
.bottle .b-text { color: #6b5580; font-size: 14px; line-height: 1.7; margin: 6px 0; white-space: pre-wrap; word-break: break-word; }
.bottle .b-date { color: #b69cc4; font-size: 11.5px; }
.bottle .b-del { position: absolute; top: 8px; right: 10px; cursor: pointer; color: #d3b6cf; border: none; background: none; font-size: 15px; }
.bottle .b-del:hover { color: #e06a92; }
.bottles .empty-b { grid-column: 1/-1; color: #b69cc4; padding: 20px; }

/* 关于我们 */
.together { background: rgba(255,255,255,.66); border: 1px solid #fff; border-radius: 22px; padding: 22px; margin: 18px 0; }
.together span { display: block; color: #9a7faa; font-size: 13.5px; }
.together b { display: block; font-family: var(--serif); font-size: 40px; color: #d27aa3; margin: 6px 0; letter-spacing: 2px; }
.profiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
.profile { background: rgba(255,255,255,.66); border: 1px solid #fff; border-radius: 20px; padding: 18px 12px; }
.profile .avatar { font-size: 36px; }
.profile b { display: block; font-family: var(--serif); color: #7a5a8e; font-size: 18px; margin: 6px 0 4px; }
.profile small { color: #a98fc0; font-size: 12px; line-height: 1.6; }
.sign-card { background: rgba(255,255,255,.66); border: 1px dashed #e3b9d6; border-radius: 18px; padding: 14px; color: #8a6a9e; font-size: 15px; margin: 8px 0 16px; }
.sign-card b { color: #d27aa3; font-family: var(--serif); }

.spectrum, .legend { background: rgba(255,255,255,.6); border: 1px solid #fff; border-radius: 20px; padding: 18px 16px; margin: 14px 0; text-align: left; }
.spectrum .label, .legend .label { color: #b08fc4; font-size: 12.5px; letter-spacing: 2px; text-align: center; display: block; margin-bottom: 14px; }
.bar-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.bar-name { width: 48px; color: #7a5a8e; font-size: 13px; flex: none; }
.bar-track { flex: 1; height: 12px; background: rgba(180,130,200,.12); border-radius: 999px; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #e0a0b2, #e7c08c); animation: grow 1s ease both; }
@keyframes grow { from { width: 0 !important; } }
.bar-num { width: 26px; text-align: right; color: #a98fc0; font-size: 12.5px; flex: none; }
.legend p { color: #7a5a8e; font-size: 13.5px; line-height: 1.9; margin: 6px 0; }
.legend b { color: #c08aa8; }

/* 测验 / 占卜 共用选项与卡片 */
.quizgame, .fortune { margin: 22px 0; }
.q-progress { color: #b08fc4; font-size: 13px; letter-spacing: 1px; margin-bottom: 12px; }
.q-card, .f-card { background: rgba(255,255,255,.66); border: 1px solid #fff; border-radius: 22px;
  padding: 24px 20px; box-shadow: 0 12px 28px rgba(180,130,200,.18); animation: pop .3s ease; }
.q-text, .f-text { font-family: var(--serif); color: #6b5580; font-size: 18px; line-height: 1.7; margin: 0 0 18px; }
.q-options, .f-options { display: flex; flex-direction: column; gap: 10px; }
.opt { cursor: pointer; border: 1px solid #efd6ea; background: rgba(255,255,255,.8);
  color: #6b5580; padding: 13px 16px; border-radius: 14px; font-size: 15px; text-align: center;
  transition: .15s; font-family: var(--sans); }
.opt:hover { border-color: #ff9ec4; transform: translateY(-1px); }
.opt.right { background: linear-gradient(135deg, #b6e3c0, #8fd6a8); color: #2e6b45; border-color: transparent; }
.opt.wrong { background: #f6d0dc; color: #c2557a; border-color: transparent; }

.q-result, .f-result { text-align: center; background: rgba(255,255,255,.66); border: 1px solid #fff;
  border-radius: 22px; padding: 28px 20px; box-shadow: 0 12px 28px rgba(180,130,200,.2); animation: pop .35s ease; }
.q-score { font-family: var(--serif); font-size: 44px; color: #d27aa3; letter-spacing: 2px; }
.q-comment { color: #7a5a8e; font-size: 16px; line-height: 1.8; margin: 12px 0 20px; font-family: var(--serif); }

.f-result .f-emoji { font-size: 64px; animation: bob 3s ease-in-out infinite; }
.f-result .f-name { font-family: var(--serif); color: #7a5a8e; font-size: 26px; margin: 8px 0 10px; }
.f-result .f-desc { color: #8a6a9e; font-size: 15px; line-height: 1.8; margin: 0 0 14px; }
.f-result .f-say { background: #fff; color: #7a5a8e; border-radius: 16px 16px 16px 4px;
  padding: 14px 16px; font-size: 14.5px; line-height: 1.8; box-shadow: 0 6px 16px rgba(180,130,200,.18); }
.f-btns { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }

@media (max-width: 520px) {
  .castle-hero h1 { font-size: 32px; }
  .rooms { gap: 10px; }
  .stat b { font-size: 18px; }
  .bottles, .profiles { grid-template-columns: 1fr; }
  .q-score { font-size: 36px; }
}