/* Weeb Kawaii — pastels · stickers · sakura · body.skin-weebkawai */

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap");

body.skin-weebkawai {
  font-family: "Nunito", "Hiragino Maru Gothic ProN", "Yu Gothic UI", "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: #5c3d5e;
  background-color: #fff5f8;
  background-image:
    url("/skins/sakura-petal.svg"),
    radial-gradient(ellipse at 20% 10%, #ffe0f0 0%, transparent 45%),
    radial-gradient(ellipse at 80% 90%, #e8d4ff 0%, transparent 40%),
    linear-gradient(180deg, #fff8fc 0%, #f8f0ff 100%);
  background-size: 24px 24px, auto, auto, auto;
}

body.skin-weebkawai::before {
  content: "♡ ようこそ IdeaPit · kawaii mode · アイデア頑張って！ ♡";
  display: block;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: #ff6b9d;
  padding: 6px;
  background: linear-gradient(90deg, #ffd6e8, #e8d4ff, #d4f0ff, #ffd6e8);
  background-size: 200% 100%;
  animation: weeb-shimmer 6s linear infinite;
  border-bottom: 2px dashed #ffb3d9;
}

@keyframes weeb-shimmer {
  to { background-position: 200% 0; }
}

body.skin-weebkawai::after {
  content: "";
  position: fixed;
  left: 10px;
  bottom: 10px;
  width: 32px;
  height: 32px;
  background: url("/skins/neko-pixel.svg") no-repeat center / contain;
  image-rendering: pixelated;
  pointer-events: none;
  z-index: 9999;
  filter: drop-shadow(0 2px 4px rgba(255, 107, 157, 0.4));
}

body.skin-weebkawai .skin-toggle {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  border: 2px solid #ffb3d9;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff 0%, #ffe8f2 100%);
  color: #ff6b9d;
  padding: 5px 14px;
  box-shadow: 0 3px 0 #ffb3d9;
}

body.skin-weebkawai .skin-toggle[aria-pressed="true"] {
  background: linear-gradient(180deg, #ffb3d9 0%, #ff8fb8 100%);
  color: #fff;
  border-color: #ff6b9d;
}

body.skin-weebkawai .skin-toggle[data-skin="weebkawai"]::before {
  content: "✧ ";
}

body.skin-weebkawai .skin-toggle[data-skin="weebkawai"]::after {
  content: " ✧";
}

/* ——— IdeaPit ——— */
body.skin-weebkawai main {
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid #ffd6e8;
  border-radius: 24px;
  box-shadow: 0 8px 0 #ffb3d9, 0 12px 32px rgba(255, 150, 200, 0.25);
  margin: 12px auto;
  padding: 16px;
  backdrop-filter: blur(4px);
}

body.skin-weebkawai .page-head {
  background:
    url("/skins/weeb-kawai-banner.png") no-repeat center top / 100% clamp(36px, 10vw, 64px),
    linear-gradient(135deg, #ffc9e0 0%, #e8c4ff 50%, #c4e8ff 100%);
  border: 3px solid #fff;
  border-radius: 20px;
  box-shadow: 0 4px 0 #ffb3d9;
  padding: clamp(28px, 8vw, 44px) 14px 10px;
  image-rendering: pixelated;
}

body.skin-weebkawai h1 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #ff6b9d;
  text-shadow: 2px 2px 0 #fff;
}

body.skin-weebkawai h1::before {
  content: "♡ ";
}

body.skin-weebkawai .hint {
  background: #fff8fc;
  border: 2px dashed #ffd6e8;
  border-radius: 12px;
  color: #9a7aaa;
  font-size: 12px;
  padding: 8px 10px;
}

body.skin-weebkawai h2 {
  background: linear-gradient(90deg, #ffd6e8, #e8d4ff);
  color: #8a5a9a;
  border-radius: 12px;
  font-weight: 700;
  text-align: center;
  padding: 6px 10px;
}

body.skin-weebkawai textarea,
body.skin-weebkawai input {
  border: 2px solid #ffd6e8;
  border-radius: 14px;
  background: #fffafc;
  font-size: 14px;
}

body.skin-weebkawai button {
  background: linear-gradient(180deg, #fff, #ffe8f2);
  border: 2px solid #ffb3d9;
  border-radius: 12px;
  color: #ff6b9d;
  font-weight: 700;
  box-shadow: 0 2px 0 #ffb3d9;
  font-size: 13px;
}

body.skin-weebkawai .capture-zone {
  border: 2px dashed #ffd6e8;
  border-radius: 16px;
  padding: 12px;
  background: #fffafc;
}

body.skin-weebkawai .resurface-zone {
  background: #fff0f8;
  border: 2px dashed #ffb3d9;
  border-radius: 16px;
}

body.skin-weebkawai .filter-chip,
body.skin-weebkawai .cloud-chip {
  border-radius: 999px;
}

body.skin-weebkawai .tabs {
  border: none;
  background: rgba(255, 248, 252, 0.8);
  border-radius: 16px;
  padding: 6px;
}

body.skin-weebkawai .tabs button {
  border-radius: 12px;
  color: #9a7aaa;
  font-weight: 600;
  border: 2px solid transparent;
}

body.skin-weebkawai .tabs button[aria-selected="true"] {
  background: linear-gradient(180deg, #ffb3d9, #ff8fb8);
  color: #fff;
  border-color: #ff6b9d;
}

body.skin-weebkawai .tab-badge {
  color: #ffe8f2;
}

body.skin-weebkawai .idea-card {
  border-top: 2px dashed #ffd6e8;
  padding: 10px 0;
}

body.skin-weebkawai .idea-card.filter-match {
  background: #fff8fc;
  border: 2px solid #ffb3d9;
  border-radius: 14px;
  padding: 10px;
}

body.skin-weebkawai .idea-title {
  color: #ff6b9d;
  font-size: 15px;
}

body.skin-weebkawai .idea-title::before {
  content: "★ ";
  color: #e8c4ff;
}

body.skin-weebkawai .counter {
  border: 2px solid #ffd6e8;
  border-radius: 10px;
  background: #fffafc;
  box-shadow: 0 2px 0 #ffd6e8;
}

body.skin-weebkawai .counter-palette-item {
  border-radius: 10px;
  border: 2px solid #ffd6e8;
  background: #fff;
}

body.skin-weebkawai .cycle-zone {
  border-top: 3px dashed #ffb3d9;
}

body.skin-weebkawai .cycle-column {
  background: #fff8fc;
  border: 2px solid #ffd6e8;
  border-radius: 14px;
}

body.skin-weebkawai .cycle-card {
  border: 2px solid #ffd6e8;
  border-radius: 10px;
  background: #fff;
}

body.skin-weebkawai .maturity-band {
  background: linear-gradient(90deg, #fff0f8, #f0e8ff);
  border: 2px dashed #e8c4ff;
  border-radius: 12px;
}

body.skin-weebkawai .status {
  color: #b088c8;
}

body.skin-weebkawai a {
  color: #ff6b9d;
  font-weight: 600;
}