/* ============================================================
   Whole-site anime skin — pastel, manga lines, sakura
   Loaded after page styles; intentionally high specificity.
   ============================================================ */
:root {
  --an-ink: #2f2748;
  --an-soft: #6e6384;
  --an-muted: #9b8da9;
  --an-pink: #ff8fc7;
  --an-pink-2: #ffb7d9;
  --an-lilac: #b9a5ff;
  --an-sky: #b9e2ff;
  --an-cream: #fffaf4;
  --an-line: rgba(104, 80, 132, .13);
  --an-shadow: 0 18px 44px rgba(97, 70, 132, .13);
  --an-font: "Segoe UI Variable Display", "Manrope", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
}
html { background: #fff8fc !important; }
body {
  color: var(--an-ink) !important;
  background-color: #fff8fc !important;
  background-image:
    radial-gradient(circle at 8% -6%, rgba(255, 177, 211, .5), transparent 24rem),
    radial-gradient(circle at 96% 1%, rgba(184, 218, 255, .62), transparent 26rem),
    radial-gradient(circle at 50% 109%, rgba(226, 211, 255, .5), transparent 30rem),
    linear-gradient(180deg, #fff9fd 0%, #fbfbff 52%, #fff8f2 100%) !important;
  font-family: var(--an-font) !important;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .24;
  background-image: radial-gradient(rgba(92, 74, 124, .3) .65px, transparent .8px);
  background-size: 15px 15px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 38%, transparent 84%, #000 100%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 38%, transparent 84%, #000 100%);
}
::selection { color: #492d58 !important; background: #ffd8e9 !important; }

/* floating sakura */
.anime-theme-petals {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.anime-theme-petals i {
  position: absolute;
  top: -8vh;
  width: 8px;
  height: 11px;
  background: linear-gradient(135deg, #ffd5e6, #ff9dcb);
  border-radius: 70% 6% 70% 12%;
  opacity: .62;
  animation: theme-petal 15s linear infinite;
}
.anime-theme-petals i:nth-child(1) { left: 6%; animation-delay: -2s; animation-duration: 17s; }
.anime-theme-petals i:nth-child(2) { left: 23%; animation-delay: -9s; animation-duration: 21s; width: 6px; height: 8px; }
.anime-theme-petals i:nth-child(3) { left: 48%; animation-delay: -5s; animation-duration: 16s; opacity: .4; }
.anime-theme-petals i:nth-child(4) { left: 70%; animation-delay: -13s; animation-duration: 22s; width: 10px; height: 13px; }
.anime-theme-petals i:nth-child(5) { left: 90%; animation-delay: -7s; animation-duration: 18s; opacity: .48; }
@keyframes theme-petal {
  0% { transform: translate3d(0, -10vh, 0) rotate(0); }
  50% { transform: translate3d(28px, 50vh, 0) rotate(170deg); }
  100% { transform: translate3d(-16px, 110vh, 0) rotate(340deg); }
}

/* shared headers and bars */
.site-header,
.topbar,
.game-header,
.dev-header,
.story-page-header {
  background: rgba(255, 250, 253, .86) !important;
  border-bottom: 1px solid var(--an-line) !important;
  box-shadow: 0 8px 28px rgba(103, 76, 132, .07) !important;
  -webkit-backdrop-filter: blur(20px) saturate(145%) !important;
  backdrop-filter: blur(20px) saturate(145%) !important;
}
.brand strong, .brand-copy strong, .brand span, .game-brand span, .dev-brand span, .story-page-brand {
  color: var(--an-ink) !important;
}
.brand small, .brand-copy small, .game-brand small, .dev-brand small {
  color: #9a83a9 !important;
}
.since-badge {
  color: #624a79 !important;
  background: linear-gradient(135deg, #fff0f7, #eef5ff) !important;
  border-color: #efd5e6 !important;
}
.user-chip {
  color: #5f4876 !important;
  background: rgba(255, 255, 255, .72) !important;
  border-color: #efd8e8 !important;
}
.personal-site-bar, .personal-bar, .game-personal-bar, .dev-personal-bar {
  color: #7a688c !important;
  background: rgba(255, 255, 255, .54) !important;
  border-bottom: 1px solid rgba(126, 101, 166, .1) !important;
}
.personal-site-bar strong, .personal-bar strong, .game-personal-bar strong, .dev-personal-bar strong {
  color: #a84e88 !important;
}

/* ============================================================
   LOGIN
   ============================================================ */
.login-gate.cosmic-login {
  background:
    radial-gradient(circle at 12% 4%, rgba(255, 184, 216, .78), transparent 27rem),
    radial-gradient(circle at 88% 2%, rgba(184, 222, 255, .9), transparent 28rem),
    radial-gradient(circle at 50% 106%, rgba(231, 218, 255, .8), transparent 30rem),
    linear-gradient(155deg, #fff6fb 0%, #f7f8ff 52%, #fff7ef 100%) !important;
}
.login-gate.cosmic-login::before {
  opacity: .55 !important;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .9) 0 2px, transparent 2.5px),
    radial-gradient(circle at 84% 24%, rgba(255, 255, 255, .9) 0 2px, transparent 2.5px),
    radial-gradient(circle at 28% 74%, rgba(255, 190, 218, .8) 0 2px, transparent 2.5px),
    radial-gradient(circle at 68% 60%, rgba(183, 217, 255, .8) 0 2px, transparent 2.5px) !important;
  background-size: 260px 260px, 310px 310px, 280px 280px, 330px 330px !important;
}
.login-gate.cosmic-login::after {
  background: linear-gradient(100deg, transparent, rgba(255, 167, 205, .16), rgba(174, 205, 255, .17), transparent) !important;
}
.login-cinema, .cosmic-rainbow { display: none !important; }
.anime-login-petals { position: fixed; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.anime-login-petals i {
  position: absolute;
  top: -10vh;
  width: 9px;
  height: 13px;
  background: linear-gradient(135deg, #ffd3e7, #ff95c8);
  border-radius: 70% 6% 70% 12%;
  opacity: .72;
  animation: login-petal 14s linear infinite;
}
.anime-login-petals i:nth-child(1) { left: 7%; animation-delay: -2s; animation-duration: 16s; }
.anime-login-petals i:nth-child(2) { left: 25%; animation-delay: -8s; animation-duration: 20s; width: 6px; height: 9px; }
.anime-login-petals i:nth-child(3) { left: 44%; animation-delay: -5s; animation-duration: 15s; opacity: .45; }
.anime-login-petals i:nth-child(4) { left: 66%; animation-delay: -12s; animation-duration: 22s; width: 11px; height: 14px; }
.anime-login-petals i:nth-child(5) { left: 85%; animation-delay: -7s; animation-duration: 18s; opacity: .55; }
.anime-login-petals i:nth-child(6) { left: 94%; animation-delay: -16s; animation-duration: 24s; width: 7px; height: 10px; }
@keyframes login-petal {
  0% { transform: translate3d(0, -10vh, 0) rotate(0); }
  50% { transform: translate3d(22px, 50vh, 0) rotate(160deg); }
  100% { transform: translate3d(-18px, 112vh, 0) rotate(330deg); }
}
.cosmic-card {
  background: rgba(255, 251, 246, .96) !important;
  border: 1px solid rgba(255, 255, 255, .96) !important;
  border-radius: 28px !important;
  box-shadow: 0 30px 90px rgba(115, 80, 143, .2), 0 0 0 1px rgba(255, 203, 225, .2) inset !important;
  animation-delay: .15s !important;
}
.cosmic-scene {
  color: var(--an-ink) !important;
  background:
    radial-gradient(circle at 75% 12%, rgba(255, 255, 255, .95) 0 5%, transparent 5.5%),
    radial-gradient(circle at 82% 20%, rgba(255, 255, 255, .7) 0 7%, transparent 7.5%),
    radial-gradient(circle at 18% 76%, rgba(255, 255, 255, .55) 0 9%, transparent 9.5%),
    linear-gradient(155deg, #ffd9e9 0%, #e9e2ff 48%, #d8efff 100%) !important;
  border-right: 1px solid rgba(255, 255, 255, .7);
}
.cosmic-scene::before {
  background-image:
    radial-gradient(ellipse at 15% 68%, rgba(255,255,255,.6), transparent 12rem),
    radial-gradient(ellipse at 80% 50%, rgba(255,255,255,.45), transparent 9rem),
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.8) 0 2px, transparent 2.5px) !important;
  background-size: auto, auto, 220px 220px !important;
  opacity: .8 !important;
}
.cosmic-scene::after {
  left: -20%;
  right: -20%;
  bottom: -25%;
  height: 60%;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 154, 196, .25), transparent 62%) !important;
  filter: blur(20px) !important;
}
.cosmic-stars, .cosmic-hills, .cosmic-forest, .cosmic-cabin, .cosmic-critters { display: none !important; }
.cosmic-moon {
  top: 30px !important;
  right: 34px !important;
  width: 52px !important;
  height: 52px !important;
  background: radial-gradient(circle at 38% 34%, #fffdf4, #ffe7a9 58%, #ffc86b) !important;
  box-shadow: 0 0 28px rgba(255, 214, 137, .6), 0 0 82px rgba(255, 214, 137, .32) !important;
}
.cosmic-scene-copy { z-index: 4; }
.cosmic-scene-kicker {
  color: #9c5d88 !important;
  font-size: 6.5px !important;
  font-weight: 800 !important;
  letter-spacing: .2em !important;
}
.cosmic-scene h1 {
  color: #3f2d56 !important;
  font-family: var(--an-font) !important;
  font-weight: 900 !important;
  letter-spacing: -.055em !important;
  line-height: 1.08 !important;
}
.cosmic-scene h1 em {
  color: #d24e99 !important;
  background: linear-gradient(110deg, #d34b98, #7b78ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cosmic-scene-copy > p:last-child { color: #6e5b80 !important; }
.cosmic-scene-copy::after {
  content: "✦ 校园角落 · CAMPUS";
  display: inline-flex;
  margin-top: 14px;
  padding: 6px 10px;
  color: #705286;
  background: rgba(255, 255, 255, .62);
  border: 1px dashed rgba(190, 111, 161, .44);
  border-radius: 7px;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: .1em;
  transform: rotate(-1.5deg);
}
.cosmic-panel {
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 219, 237, .72), transparent 15rem),
    #fffaf5 !important;
  color: var(--an-ink) !important;
}
.cosmic-brand strong { color: #3c2b50 !important; }
.cosmic-brand small { color: #a183ac !important; }
.cosmic-kicker { color: #b35b92 !important; }
.cosmic-panel h2 { color: #38264d !important; font-family: var(--an-font) !important; font-weight: 900 !important; letter-spacing: -.05em !important; }
.cosmic-lead { color: #827090 !important; }
.cosmic-avatar-title { color: #a25a89 !important; }
.cosmic-avatar-preview {
  background: linear-gradient(145deg, #ffe0ed, #e3ddff) !important;
  border-color: #fff !important;
  box-shadow: 0 10px 25px rgba(159, 99, 154, .2) !important;
}
.cosmic-avatar-option {
  border-color: #f0d9e8 !important;
  background: #fff !important;
}
.cosmic-avatar-option.is-active {
  border-color: #ea8fc3 !important;
  box-shadow: 0 0 0 3px rgba(255, 150, 201, .16) !important;
}
.cosmic-upload {
  color: #8b5788 !important;
  background: #fff2f9 !important;
  border-color: #f0cfe2 !important;
}
.cosmic-field label { color: #786287 !important; }
.cosmic-field input {
  color: #3d2b50 !important;
  background: #fffdf9 !important;
  border-color: #efd9e7 !important;
}
.cosmic-field input:focus {
  border-color: #e9a6ca !important;
  box-shadow: 0 0 0 3px rgba(255, 154, 201, .12) !important;
}
.cosmic-submit {
  color: #fff !important;
  background: linear-gradient(135deg, #ff7fbb, #9d7bff) !important;
  box-shadow: 0 10px 24px rgba(174, 104, 214, .26) !important;
}
.cosmic-note, .cosmic-footer, .cosmic-visitor { color: #9b89a3 !important; }
.cosmic-visitor strong { color: #b34b88 !important; }

/* ============================================================
   HOME BENTO + CONTENT
   ============================================================ */
.bento-dashboard {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .62), rgba(255, 239, 248, .55) 52%, rgba(238, 244, 255, .62)),
    url("./campus-main.jpg") center 36% / cover no-repeat !important;
  border: 1px solid rgba(255, 255, 255, .92) !important;
  box-shadow: 0 24px 64px rgba(105, 77, 139, .15) !important;
}
.bento-dashboard::before {
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 162, 203, .22), transparent 22rem),
    radial-gradient(circle at 82% 5%, rgba(156, 204, 255, .24), transparent 20rem) !important;
}
.bento-card {
  color: var(--an-ink) !important;
  background: rgba(255, 255, 255, .74) !important;
  border-color: rgba(255, 255, 255, .95) !important;
  box-shadow: inset 0 1px 0 #fff, 0 14px 34px rgba(103, 77, 135, .1) !important;
}
.bento-profile {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 195, 221, .7), transparent 14rem),
    linear-gradient(160deg, rgba(255, 255, 255, .88), rgba(255, 240, 249, .7)) !important;
}
.bento-profile-top { color: #a15b8a !important; }
.bento-avatar {
  color: #5a3c68 !important;
  background: linear-gradient(145deg, #ffe6f0, #e4ddff) !important;
  border-color: #fff !important;
  box-shadow: 0 9px 24px rgba(151, 95, 151, .18) !important;
}
.bento-name { color: #38274d !important; }
.bento-account { color: #947fa3 !important; }
.bento-bio { color: #6d5e7f !important; }
.bento-profile-links a {
  color: #6c4f80 !important;
  background: rgba(255, 255, 255, .65) !important;
  border-color: #efd8e7 !important;
}
.bento-profile-links a:first-child {
  color: #fff !important;
  background: linear-gradient(135deg, #ff8ac0, #a783ff) !important;
}
.bento-hero {
  background:
    radial-gradient(circle at 88% 18%, rgba(255, 189, 218, .42), transparent 17rem),
    radial-gradient(circle at 12% 100%, rgba(164, 207, 255, .35), transparent 16rem),
    rgba(255, 255, 255, .48) !important;
}
.bento-kicker { color: #a75d8e !important; }
.bento-kicker::before { background: #ed8dbd !important; }
.bento-hero h1 { color: #3b2a50 !important; }
.bento-hero h1 span {
  background: linear-gradient(110deg, #3e2d58 4%, #d24f9a 45%, #7a7dff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
.bento-hero p { color: #6c5d7f !important; }
.bento-actions a {
  color: #6b4b7d !important;
  background: rgba(255, 255, 255, .62) !important;
  border-color: #efd8e8 !important;
}
.bento-actions a:first-child {
  color: #fff !important;
  background: linear-gradient(135deg, #ff86bd, #a67fff) !important;
}
.bento-stats h2, .bento-tags h2 { color: #a45a8b !important; }
.bento-stat-row { border-bottom-color: rgba(150, 117, 166, .14) !important; }
.bento-stat-row strong { color: #3d2b51 !important; }
.bento-stat-row span { color: #94829f !important; }
.bento-tag-list span {
  color: #755d8a !important;
  background: rgba(255, 255, 255, .6) !important;
  border-color: #efdbeb !important;
}
.bento-feature {
  color: #3b2b4e !important;
  background: rgba(255, 255, 255, .72) !important;
  border-color: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 12px 30px rgba(104, 77, 132, .1) !important;
}
.bento-feature::before {
  background: linear-gradient(90deg, rgba(255, 250, 253, .94), rgba(255, 240, 248, .2)), var(--img) center / cover no-repeat !important;
  opacity: .93 !important;
}
.bento-feature-copy small { color: #a75a8c !important; }
.bento-feature-copy span { color: #796a86 !important; }
.bento-feature-arrow { color: #fff !important; background: linear-gradient(135deg, #ff8ac0, #a882ff) !important; }

/* sections + generic cards */
.section-title, .section-heading h2 { color: #38274d !important; }
.section-heading p, .section-desc, .section-head p { color: #7d6d8b !important; }
.section-label, .section-kicker, .eyebrow { color: #a55b8d !important; }
.section-title::after { background: linear-gradient(90deg, #ff9aca, #b9a2ff) !important; }
.section [class*="card"],
.game-entry,
.forest-widget-card,
.about-intro-card,
.location-card,
.creator-card,
.wall-card,
.music-card,
.resource-item,
.notice-item {
  color: #3c2c50 !important;
  background: rgba(255, 255, 255, .78) !important;
  border-color: rgba(255, 255, 255, .92) !important;
  box-shadow: var(--an-shadow) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
}
.game-entry * { color: inherit; }
.game-entry-copy strong { color: #3d2b50 !important; }
.game-entry-copy span { color: #7e6d8c !important; }
.game-entry-action, .bento-actions a, .btn {
  border-color: #efd8e8 !important;
}
.game-entry-action { color: #6b4c7f !important; background: #fff4fa !important; }
.forest-widget-card { overflow: hidden; }
.forest-widget-card * { color: inherit; }
.about-intro-card p, .about-intro-card li, .location-card p, .creator-card * { color: #6d5b7e !important; }
.creator-card strong, .wall-card strong { color: #3c2b50 !important; }
.creator-card, .wall-card { border-radius: 18px !important; }
.creator-add, .wall-add {
  color: #fff !important;
  background: linear-gradient(135deg, #ff87bf, #a57fff) !important;
  border-color: transparent !important;
}
.creator-badge, .wall-badge {
  color: #98517f !important;
  background: #ffe9f4 !important;
  border-color: #f4c9df !important;
}
.creator-qq, .wall-qq { color: #9a839f !important; }
.creator-copy, .creator-add, .wall-add { border-color: #efd7e7 !important; }
.location-card { background: #fff !important; }
.footer-brand strong { color: #3c2b50 !important; }
.footer-copy span, .footer-note, .footer-bottom { color: #94829f !important; }
.footer-note a, .back-top { color: #a45389 !important; }

/* dock + floating */
.bottom-dock.app-dock, .app-dock {
  background: rgba(255, 251, 253, .9) !important;
  border-color: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 12px 32px rgba(103, 76, 136, .18) !important;
}
.app-dock-link, .bottom-dock.app-dock .app-dock-link { color: #927f9f !important; }
.app-dock-link.is-active, .bottom-dock.app-dock .app-dock-link.is-active {
  color: #4d2f62 !important;
  background: linear-gradient(135deg, #ffe0ef, #eae1ff) !important;
}
.feedback-fab, .music-orb {
  color: #5d3f71 !important;
  background: rgba(255, 250, 253, .9) !important;
  border-color: #efd7e8 !important;
  box-shadow: 0 10px 26px rgba(105, 77, 133, .16) !important;
}
.music-card {
  background: rgba(255, 250, 253, .94) !important;
  border-color: #f1d8e8 !important;
}
.music-title, .music-card strong { color: #3d2b50 !important; }
.music-artist, .music-note, .music-status { color: #8e7b9a !important; }
.music-play { color: #fff !important; background: linear-gradient(135deg, #ff87bf, #a57fff) !important; }
.music-volume { accent-color: #d36a9f !important; }
.toast { color: #fff !important; background: rgba(62, 42, 78, .94) !important; }
.sheet { background: #fffaf5 !important; color: #3c2b50 !important; }
.sheet-head, .sheet h2, .sheet h3 { color: #3c2b50 !important; }

/* ============================================================
   PROFILE
   ============================================================ */
.profile-shell { color: var(--an-ink) !important; }
.profile-toolbar a { color: #a45389 !important; }
.profile-toolbar button { color: #8d7a9d !important; }
.profile-cover {
  background:
    linear-gradient(180deg, rgba(255, 238, 248, .12), rgba(255, 249, 253, .92)),
    url("./campus-main.jpg") center 38% / cover no-repeat !important;
  border-color: rgba(255, 255, 255, .9) !important;
  box-shadow: var(--an-shadow) !important;
}
.profile-cover::after { background: radial-gradient(circle at 18% 18%, rgba(255, 170, 208, .32), transparent 18rem) !important; }
.profile-kicker { color: #a75a8c !important; }
.profile-name { color: #3b2a50 !important; }
.profile-account { color: #8d789d !important; }
.profile-avatar {
  color: #5a3c68 !important;
  background: linear-gradient(145deg, #ffe3ef, #e5ddff) !important;
  border-color: #fff !important;
}
.profile-btn {
  color: #6c4d80 !important;
  background: rgba(255, 255, 255, .7) !important;
  border-color: #efd7e7 !important;
}
.profile-btn.primary { color: #fff !important; background: linear-gradient(135deg, #ff87bf, #a57fff) !important; }
.profile-stats { background: rgba(255, 255, 255, .5) !important; border-color: #fff !important; }
.profile-stat { background: rgba(255, 255, 255, .66) !important; }
.profile-stat strong { color: #3c2b50 !important; }
.profile-stat span { color: #927f9f !important; }
.profile-bio { color: #6e5d80 !important; }
.profile-tabs { background: rgba(255, 255, 255, .74) !important; border-color: #fff !important; }
.profile-tab { color: #927f9f !important; }
.profile-tab.is-active { color: #fff !important; background: linear-gradient(135deg, #ff87bf, #a57fff) !important; }
.profile-photo { border-color: #fff !important; background: #f7eaf3 !important; }
.profile-photo > span { color: #fff !important; }
.profile-post {
  color: #4f3d62 !important;
  background: rgba(255, 255, 255, .8) !important;
  border-color: #fff !important;
}
.profile-post strong { color: #3c2b50 !important; }
.profile-post span { color: #907e9d !important; }
.profile-empty {
  color: #7e6d8b !important;
  background: rgba(255, 255, 255, .66) !important;
  border-color: #e9d4e5 !important;
}
.profile-empty strong { color: #4a335d !important; }

/* ============================================================
   SETTINGS
   ============================================================ */
.settings-shell, .shell { color: var(--an-ink); }
.hero .scene-label {
  color: #a05c8a !important;
  background: rgba(255, 255, 255, .65) !important;
  border-color: #efd7e7 !important;
}
.hero .kicker { color: #a85b8e !important; }
.hero h1 { color: #3b2a50 !important; }
.hero p { color: #7c6b8b !important; }
.account-hero {
  color: #3d2b50 !important;
  background:
    radial-gradient(circle at 88% 10%, rgba(255, 171, 207, .55), transparent 15rem),
    linear-gradient(135deg, #ffe3ef 0%, #e8e4ff 55%, #d8efff 100%) !important;
  border: 1px solid rgba(255, 255, 255, .9) !important;
  box-shadow: var(--an-shadow) !important;
}
.account-name { color: #3a294e !important; }
.account-kicker, .account-handle { color: #8c759c !important; }
.account-badge { color: #98517f !important; background: #fff0f8 !important; border-color: #f3cbe0 !important; }
.account-avatar { border-color: #fff !important; box-shadow: 0 7px 20px rgba(114, 77, 136, .18) !important; }
.account-stat { background: rgba(255, 255, 255, .55) !important; }
.account-stat strong { color: #3c2b50 !important; }
.account-stat span { color: #947f9f !important; }
.avatar-change, .exit-btn {
  color: #6b4b7d !important;
  background: rgba(255, 255, 255, .7) !important;
  border-color: #efd7e7 !important;
}
.card {
  color: #3c2b50 !important;
  background: rgba(255, 255, 255, .82) !important;
  border-color: #f3ddea !important;
  box-shadow: var(--an-shadow) !important;
}
.card h2, .card h3 { color: #3c2b50 !important; }
.field label { color: #7f6a8d !important; }
.field input, .field textarea, .field select {
  color: #3c2b50 !important;
  background: #fffdf9 !important;
  border-color: #efd8e7 !important;
}
.save-btn { color: #fff !important; background: linear-gradient(135deg, #ff87bf, #a57fff) !important; }
.exit-btn { color: #b14c64 !important; }
.link { color: #4f3d62 !important; border-bottom-color: #f0deeb !important; }
.link small { color: #96829e !important; }
.site-copy small { color: #8f7b9b !important; }
.site-badge { color: #98517f !important; background: #fff0f8 !important; border-color: #f3cbe0 !important; }

/* ============================================================
   GAME
   ============================================================ */
.game-shell { color: var(--an-ink); }
.game-kicker { color: #a85b8e !important; }
.game-hero h1 { color: #3b2a50 !important; }
.game-hero p { color: #7c6b8b !important; }
.game-card {
  background: rgba(255, 255, 255, .86) !important;
  border-color: #f2dce9 !important;
  box-shadow: var(--an-shadow) !important;
}
.score-box {
  background: linear-gradient(135deg, #fff2f9, #eef4ff) !important;
  border-color: #f1dbe9 !important;
}
.score-box span { color: #95809f !important; }
.score-box strong { color: #3c2b50 !important; }
.restart {
  color: #fff !important;
  background: linear-gradient(135deg, #ff87bf, #a57fff) !important;
  border-color: transparent !important;
}
.board {
  background: linear-gradient(145deg, #f4e7f2, #e9e4fb) !important;
  border-color: #fff !important;
  box-shadow: inset 0 2px 8px rgba(104, 76, 133, .1) !important;
}
.cell { background: rgba(255, 255, 255, .58) !important; }
.tile { box-shadow: 0 3px 8px rgba(101, 73, 132, .1) !important; }
.tile-2 { color: #6e587e !important; background: #fff2f8 !important; }
.tile-4 { color: #6e587e !important; background: #ffe6f1 !important; }
.tile-8 { color: #fff !important; background: #ffb3d3 !important; }
.tile-16 { color: #fff !important; background: #ff93bf !important; }
.tile-32 { color: #fff !important; background: #e983c1 !important; }
.tile-64 { color: #fff !important; background: #ca81df !important; }
.tile-128 { color: #fff !important; background: #a988f1 !important; }
.tile-256 { color: #fff !important; background: #8d8af2 !important; }
.tile-512 { color: #fff !important; background: #729cf0 !important; }
.tile-1024 { color: #fff !important; background: #629bd5 !important; }
.tile-2048 { color: #5b3b12 !important; background: linear-gradient(145deg, #ffe7a8, #ffc76e) !important; }
.overlay-card { background: #fffafd !important; border-color: #f1d7e7 !important; }
.overlay-card > strong { color: #3c2b50 !important; }
.overlay-card > p { color: #8b7898 !important; }
.game-footer, .game-tip, .game-privacy { color: #97839f !important; }

/* ============================================================
   DEVELOPER
   ============================================================ */
.dev-shell { color: var(--an-ink); }
.dev-hero {
  background: linear-gradient(135deg, #ffe3ef, #e8e4ff 52%, #d8efff) !important;
  border-color: #fff !important;
  color: #3b2a50 !important;
  box-shadow: var(--an-shadow) !important;
}
.dev-hero::before { background: radial-gradient(circle at 10% 10%, rgba(255, 177, 211, .35), transparent 18rem) !important; }
.dev-hero::after { opacity: .3 !important; }
.dev-kicker { color: #a55b8c !important; }
.dev-hero h1 { color: #3b2a50 !important; }
.dev-hero h1 em { color: #c34f94 !important; }
.dev-sub { color: #6f5c80 !important; }
.dev-name { color: #3b2a50 !important; }
.dev-class { color: #8b7798 !important; }
.dev-badge { color: #98517f !important; background: #fff0f8 !important; border-color: #f2c9df !important; }
.dev-stats .dev-stat, .dev-stat {
  color: #3c2b50 !important;
  background: rgba(255, 255, 255, .8) !important;
  border-color: #fff !important;
}
.dev-stat strong { color: #3c2b50 !important; }
.dev-stat span { color: #94829f !important; }
.dev-card {
  color: #4f3d62 !important;
  background: rgba(255, 255, 255, .82) !important;
  border-color: #f1dae9 !important;
}
.dev-card h2 { color: #3c2b50 !important; }
.dev-card p { color: #6f5d80 !important; }
.dev-card strong { color: #a24f8b !important; }
.dev-quote { color: #6d5a7f !important; border-color: #efd8e7 !important; }
.dev-cta {
  color: #3b2a50 !important;
  background: linear-gradient(135deg, #ffe3ef, #e9e4ff) !important;
  border: 1px solid #fff !important;
  box-shadow: var(--an-shadow) !important;
}
.dev-cta h2 { color: #3c2b50 !important; }
.dev-cta p { color: #756184 !important; }
.dev-qq { color: #fff !important; background: linear-gradient(135deg, #ff87bf, #a57fff) !important; }
.dev-copy { color: #6b4b7d !important; background: #fffafd !important; border-color: #efd7e7 !important; }
.dev-note, .dev-disclaimer, .dev-footer { color: #95839f !important; }

/* ============================================================
   INTRO / STORY — pastel frame over the long scroll
   ============================================================ */
.story-page-header { background: rgba(255, 250, 253, .9) !important; }
.story-page-brand { color: #3b2a50 !important; }
.story-page-back { color: #8f5a91 !important; background: #fff4fa !important; border-color: #efd7e7 !important; }
.story-hud {
  color: #5d456f !important;
  background: rgba(255, 250, 253, .84) !important;
  border-color: #f0d8e7 !important;
}
.story-hud-brand { color: #9f5688 !important; }
.story-hud-chapter b { color: #3c2b50 !important; }
.story-rail {
  background: rgba(255, 250, 253, .84) !important;
  border-color: #f0d8e7 !important;
}
.story-rail-button { color: #877391 !important; }
.story-rail-button.is-active { color: #fff !important; background: linear-gradient(135deg, #ff87bf, #a57fff) !important; }
.story-panel--light {
  color: #3d2b50 !important;
  background: linear-gradient(160deg, #fff9fd, #fbf8ff 55%, #fff8f2) !important;
}
.story-panel--light .story-heading, .story-panel--light .story-lede, .story-panel--light p { color: #4e3b62 !important; }
.story-panel--light .story-kicker { color: #a75a8c !important; }
.story-panel--cover .story-veil {
  background: linear-gradient(180deg, rgba(47, 20, 42, .18), rgba(78, 36, 61, .5)) !important;
}
.story-panel--cover .story-hero-title { color: #fff8fb !important; }
.story-panel--cover .story-cover-sub, .story-panel--cover .story-cover-eyebrow { color: rgba(255, 249, 253, .82) !important; }

@media (max-width: 760px) {
  .cosmic-card { border-radius: 24px !important; }
  .cosmic-scene { min-height: 176px !important; border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.8); }
  .cosmic-scene h1 { font-size: 28px !important; }
  .cosmic-scene-copy::after { margin-top: 9px; padding: 4px 7px; font-size: 5.5px; }
  .login-gate.cosmic-login { padding: 14px 11px !important; }
  .cosmic-panel { padding: 18px 16px !important; }
  .bento-dashboard { margin-top: 9px !important; }
  .section-title, .section-heading h2 { color: #3b2a50 !important; }
}
@media (max-width: 420px) {
  .cosmic-scene { min-height: 154px !important; }
  .cosmic-scene h1 { font-size: 26px !important; }
  .profile-cover { min-height: 190px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .anime-theme-petals, .anime-login-petals { display: none !important; }
}

/* high-specificity fixes for legacy dark hero + washed profile name */
body .hero:not(#home) {
  color: var(--an-ink) !important;
  background: #ffe4f0 !important;
  background-image:
    radial-gradient(circle at 87% 22%, rgba(255,255,255,.92) 0 4%, transparent 4.5%),
    radial-gradient(circle at 82% 34%, rgba(255,255,255,.62) 0 6%, transparent 6.5%),
    linear-gradient(135deg, #ffe0ed 0%, #e8e4ff 46%, #d8efff 100%) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  border: 1px solid rgba(255,255,255,.86) !important;
  border-radius: 24px !important;
  box-shadow: 0 18px 42px rgba(129,93,174,.14) !important;
  padding: 20px 16px 18px !important;
}
body .hero:not(#home) h1,
body .hero:not(#home) .hero-title {
  color: #3b2a50 !important;
  -webkit-text-fill-color: #3b2a50 !important;
  text-shadow: none !important;
}
body .hero:not(#home) p { color: #786786 !important; }
body .hero:not(#home) .kicker { color: #a75a8c !important; }
body .hero:not(#home) .scene-label {
  color: #8d5d88 !important;
  background: rgba(255,255,255,.58) !important;
  border-color: rgba(190,140,181,.24) !important;
}
body .bento-profile > * { position: relative; z-index: 3; }
body .bento-profile .bento-name {
  color: #2f1f46 !important;
  -webkit-text-fill-color: #2f1f46 !important;
  background: none !important;
  opacity: 1 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.32) !important;
}
body .bento-profile .bento-profile-top { color: #914d78 !important; }
body .bento-profile .bento-account { color: #756284 !important; }
body .bento-profile .bento-bio { color: #655576 !important; }
body .bento-profile .bento-profile-links { z-index: 4; }

/* final contrast fixes */
.site-header .user-chip {
  color: #5b406f !important;
  background: rgba(255, 255, 255, .82) !important;
  border: 1px solid #efd6e6 !important;
  box-shadow: 0 4px 12px rgba(104, 76, 132, .08) !important;
}
.site-header .user-chip .icon { color: #9a6389 !important; }
.site-header .since-badge {
  color: #6a4b7c !important;
  background: linear-gradient(135deg, #fff1f7, #eef5ff) !important;
  border-color: #efd5e5 !important;
}
.app-dock-link .icon,
.bottom-dock.app-dock .app-dock-link .icon {
  color: inherit !important;
  stroke: currentColor !important;
}
.app-dock-link.is-active .icon,
.bottom-dock.app-dock .app-dock-link.is-active .icon { color: #b84f8a !important; }
.story-page-header .story-page-brand,
.story-page-header .story-page-brand span,
.story-page-header .story-page-brand small { color: #3b2a50 !important; }
.story-page-header .story-page-back {
  color: #8b537f !important;
  background: #fff4fa !important;
  border-color: #efd6e6 !important;
}
.story-panel .story-bg { filter: saturate(.82) contrast(.97) hue-rotate(-3deg); }
.story-panel .story-veil {
  background: linear-gradient(180deg, rgba(255, 225, 241, .16) 0%, rgba(255, 246, 251, .08) 34%, rgba(54, 27, 69, .5) 100%) !important;
}
.story-panel--cover .story-hero-title { color: #fff8fc !important; text-shadow: 0 3px 20px rgba(65, 30, 63, .34); }
.story-panel--light .story-stat { background: #fff !important; border-color: #f1dce9 !important; }
.story-panel--light .story-stat strong { color: #3c2b50 !important; }
.story-panel--light .story-stat span { color: #8e7a9a !important; }

html body .site-header .user-chip {
  color: #5b406f !important;
  background: rgba(255, 255, 255, .86) !important;
  border: 1px solid #efd6e6 !important;
  box-shadow: 0 4px 12px rgba(104, 76, 132, .08) !important;
}
html body .site-header .user-chip .user-chip-name { color: #5b406f !important; }
html body .site-header .user-chip .icon { color: #9a6389 !important; }
html body .app-dock .app-dock-link { color: #8d789d !important; }
html body .app-dock .app-dock-link.is-active { color: #4c2f60 !important; background: linear-gradient(135deg, #ffe0ef, #eae1ff) !important; }
html body .app-dock .app-dock-link .icon { color: inherit !important; stroke: currentColor !important; }

.bento-feature.leisure { --img: url("./forest-card.jpg"); }


/* leisure section contrast */
.site-shell { color: #2f2748 !important; }
.site-shell .leisure-zone .leisure-head h2,
.site-shell .leisure-zone .leisure-copy h3 { color: #3b2a50 !important; }
.site-shell .leisure-zone .leisure-head p,
.site-shell .leisure-zone .leisure-copy p { color: #7d6c8a !important; }
.site-shell .leisure-zone .leisure-head .leisure-kicker,
.site-shell .leisure-zone .leisure-copy small { color: #a45b8b !important; }
.site-shell .leisure-zone .leisure-go { color: #a44f86 !important; }