:root {
    --bg: #0b0d1a;
    --panel: rgba(20, 22, 40, 0.78);
    --line: rgba(120, 130, 200, 0.18);
    --text: #e6e9ff;
    --muted: #a9b0e0;
    --cyan: #5ef2ff;
    --yellow: #ffd84f;
    --pink: #ff4f8b;
    --purple: #a77bff;
    --green: #5dffa8;
    --display: "Outfit", system-ui, sans-serif;
    --body: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; }
  body {
    min-height: 100vh;
    background-color: var(--bg);
    background-image:
      radial-gradient(circle at 20% 10%, rgba(94, 242, 255, 0.10), transparent 40%),
      radial-gradient(circle at 85% 70%, rgba(255, 79, 139, 0.10), transparent 40%),
      linear-gradient(rgba(120, 130, 200, 0.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(120, 130, 200, 0.07) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 32px 32px, 32px 32px;
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--body);
    -webkit-tap-highlight-color: transparent;
  }


  .wrap { max-width: 440px; margin: 0 auto; padding: 18px 16px 40px; }

  .head {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--display); letter-spacing: 2px; font-size: 13px; color: var(--muted);
  }
  .head b { color: var(--cyan); font-weight: 800; }

  /* --- タイプカード --- */
  .card {
    position: relative; overflow: hidden;
    margin-top: 12px; padding: 22px 20px 20px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
    box-shadow: 0 0 0 1px rgba(94,242,255,0.05), 0 20px 50px rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
  }
  .card::before { /* 走査線 */
    content: ""; position: absolute; left: 0; right: 0; top: -40%; height: 40%;
    background: linear-gradient(180deg, transparent, rgba(94,242,255,0.18), transparent);
    animation: scan 1.4s ease-out 0.1s 1 both; pointer-events: none;
  }
  @keyframes scan { from { top: -40%; } to { top: 110%; } }

  .label { font-size: 12px; letter-spacing: 3px; color: var(--muted); font-family: var(--display); }
  .type-icon { font-size: 40px; line-height: 1; margin-top: 10px; }
  .type-name {
    margin: 8px 0 6px; font-size: 27px; font-weight: 800; line-height: 1.3;
    background: linear-gradient(90deg, var(--type-a, var(--cyan)), var(--type-b, var(--purple)));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 14px rgba(94,242,255,0.25));
  }
  .type-desc { margin: 0; font-size: 14px; line-height: 1.7; color: #cdd2f5; }
  .rarity {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
    padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700;
    background: rgba(255, 216, 79, 0.12); color: var(--yellow); border: 1px solid rgba(255,216,79,0.35);
  }
  .badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
  .badges .rarity { margin-top: 0; }
  .tier {
    padding: 4px 12px; border-radius: 6px; font: 800 14px var(--display); letter-spacing: 1px;
    color: #0b0d1a; background: var(--tier, var(--muted)); box-shadow: 0 0 14px var(--tier, transparent);
  }
  .tier.secret { background: linear-gradient(90deg, #5ef2ff, #a77bff, #ff4f8b, #ffd84f); box-shadow: 0 0 18px rgba(255,255,255,0.5); }
  .rarity.common { background: rgba(169,176,224,0.1); color: var(--muted); border-color: var(--line); }

  .radar { display: block; width: 100%; max-width: 300px; margin: 14px auto 0; overflow: visible; }
  .radar .poly { transform-origin: 150px 150px; animation: grow 0.9s cubic-bezier(.2,1.4,.4,1) 0.5s both; }
  @keyframes grow { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

  /* --- 能力バー --- */
  .stats { margin-top: 6px; display: grid; gap: 9px; }
  .stat { display: grid; grid-template-columns: 74px 1fr 64px; align-items: center; gap: 10px; font-size: 13px; }
  .stat .name { color: var(--muted); white-space: nowrap; }
  .bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,0.06); overflow: hidden; }
  .bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--c);
           box-shadow: 0 0 10px var(--c); transition: width 0.9s cubic-bezier(.2,.8,.2,1); }
  .stat .pct { text-align: right; font-family: var(--display); font-weight: 700; color: var(--text); }
  .stat .pct small { color: var(--muted); font-weight: 400; font-size: 11px; }

  .summary {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px;
  }
  .summary div {
    text-align: center; padding: 10px 4px; border-radius: 12px;
    background: rgba(255,255,255,0.04); border: 1px solid var(--line);
  }
  .summary b { display: block; font-family: var(--display); font-size: 20px; font-weight: 800; color: var(--text); }
  .summary span { font-size: 11px; color: var(--muted); }

  /* --- シェア --- */
  .share { margin-top: 18px; display: grid; gap: 10px; }
  .btn {
    display: flex; justify-content: center; align-items: center; gap: 8px;
    width: 100%; padding: 14px; border-radius: 999px; border: 0; cursor: pointer;
    font: 800 15px var(--body); letter-spacing: 1px;
  }
  .btn-x { background: #fff; color: #000; }
  .btn-img { background: linear-gradient(90deg, var(--cyan), var(--purple)); color: #0b0d1a; box-shadow: 0 0 22px rgba(94,242,255,0.35); }
  .btn-sub { background: transparent; color: var(--text); border: 1px solid var(--line); font-weight: 600; }
  .btn:active { transform: scale(0.98); }
  .toast { min-height: 1.2em; text-align: center; font-size: 13px; color: var(--yellow); margin: 0; }

  .next {
    margin-top: 16px; text-align: center; font-size: 13px; color: var(--muted);
  }
  .next b { font-family: var(--display); color: var(--cyan); font-size: 18px; letter-spacing: 1px; }