:root {
      color-scheme: light;
      --bg: #d8f1e6;
      --bg-deep: #c4e7d7;
      --panel: rgba(255,255,255,.88);
      --panel-strong: #fff;
      --line: rgba(31, 91, 80, .16);
      --text: #142832;
      --muted: #607777;
      --h: #2b9f78;
      --m: #d76d4d;
      --danger: #b42318;
      --shadow: 0 16px 38px rgba(32, 77, 68, .14);
    }

    * { box-sizing: border-box; }
    html, body { min-height: 100%; }
    body {
      margin: 0;
      background:
        radial-gradient(circle at 8% 0%, rgba(255,255,255,.9), transparent 28rem),
        radial-gradient(circle at 92% 18%, rgba(93,205,165,.19), transparent 30rem),
        linear-gradient(180deg, #eaf8f2 0%, var(--bg) 48%, #cdeadd 100%);
      color: var(--text);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Segoe UI", sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    button { appearance: none; border: 0; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .screen { display: none; }
    .screen.active { display: block; }
    .app { width: min(100%, 920px); min-height: 100dvh; margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 18px max(32px, env(safe-area-inset-bottom)); }

    .hero { padding: 28px 2px 30px; text-align: center; }
    .hero-badge { display: inline-flex; padding: 7px 13px; border-radius: 999px; background: rgba(255,255,255,.76); border: 1px solid var(--line); color: #37615f; font-size: 12px; font-weight: 900; letter-spacing: .08em; }
    .hero h1 { margin: 12px 0 0; font-size: clamp(30px, 7vw, 48px); line-height: 1.08; }
    .hero p { margin: 14px 0 0; color: var(--muted); line-height: 1.75; font-size: 15px; font-weight: 700; }

    .category-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; max-width: 760px; margin: 0 auto; }
    .category-button { min-width: 0; padding: 20px; display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: 18px; text-align: left; border-radius: 26px; background: var(--panel); border: 2px solid rgba(255,255,255,.76); box-shadow: var(--shadow); transition: transform .16s ease, box-shadow .16s ease; }
    .category-button:hover { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(32,77,68,.2); }
    .category-button:active { transform: translateY(0); }
    .category-button.h { border-color: rgba(43,159,120,.32); }
    .category-button.m { border-color: rgba(215,109,77,.32); }
    .category-mark { width: 72px; aspect-ratio: 620 / 860; display: grid; place-items: center; border-radius: 9px; color: #fff; font-size: 28px; font-weight: 950; box-shadow: 0 10px 22px rgba(30,70,63,.18); position: relative; overflow: hidden; }
    .category-mark::before { content: ""; position: absolute; inset: 8px; border: 2px solid rgba(255,255,255,.58); border-radius: 6px; }
    .category-mark.h { background: linear-gradient(145deg, #55b991, #286e62); }
    .category-mark.m { background: linear-gradient(145deg, #de8f66, #8e4a48); }
    .category-mark span { position: relative; z-index: 1; }
    .category-copy strong { display: block; font-size: clamp(18px,3vw,24px); line-height: 1.35; }
    .category-copy small { display: block; margin-top: 9px; color: var(--muted); font-size: 13px; line-height: 1.65; font-weight: 700; }
    .category-copy em { display: inline-flex; margin-top: 14px; font-size: 12px; font-style: normal; font-weight: 900; color: #28725b; }
    .category-button.m .category-copy em { color: #984a35; }

    .topbar { position: sticky; top: 0; z-index: 5; margin: calc(-1 * max(18px, env(safe-area-inset-top))) -18px 22px; padding: max(12px, env(safe-area-inset-top)) 18px 14px; background: rgba(234,248,242,.9); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(27,82,78,.12); }
    .topbar-inner { width: min(100%, 884px); margin: 0 auto; }
    .back-button { min-height: 42px; padding: 0 15px; border-radius: 999px; background: rgba(255,255,255,.86); border: 1px solid var(--line); font-size: 14px; font-weight: 900; box-shadow: 0 7px 20px rgba(32,77,68,.09); }
    .title-row { margin-top: 13px; }
    .title-row h2 { margin: 0; font-size: clamp(23px,5vw,31px); line-height: 1.2; }
    .title-row p { margin: 7px 0 0; color: var(--muted); font-size: 13px; font-weight: 700; }

    .monster-list { display: grid; gap: 12px; }
    .monster-button { width: 100%; min-width: 0; padding: 0; display: grid; grid-template-columns: 82px minmax(76px, 102px) 1fr 28px; align-items: stretch; text-align: left; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 10px 26px rgba(32,77,68,.1); overflow: hidden; transition: transform .14s ease, box-shadow .14s ease; }
    .monster-button:hover { transform: translateY(-2px); box-shadow: 0 15px 32px rgba(32,77,68,.16); }
    .monster-button:active { transform: translateY(0); }

    .thumbnail-tile { width: 82px; min-height: 82px; display: grid; place-items: center; padding: 7px; background: rgba(255,255,255,.68); border-right: 1px solid var(--line); overflow: hidden; }
    .monster-thumbnail { display: block; width: 68px; height: 68px; object-fit: contain; border-radius: 12px; background: linear-gradient(145deg, #f6fbf8, #e7f3ed); }
    .thumbnail-tile.no-image { color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .04em; }
    .number-tile { display: flex; flex-direction: column; justify-content: center; padding: 14px 12px; background: linear-gradient(150deg, rgba(43,159,120,.16), rgba(43,159,120,.05)); border-right: 1px solid var(--line); }
    .monster-button.m .number-tile { background: linear-gradient(150deg, rgba(215,109,77,.16), rgba(215,109,77,.05)); }
    .number-tile small { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
    .monster-card-number { display: block; margin-top: 3px; font-size: clamp(16px,3vw,20px); font-weight: 950; line-height: 1.15; overflow-wrap: anywhere; }
    .monster-meta { min-width: 0; padding: 15px 16px; align-self: center; }
    .monster-name { display: block; font-size: clamp(17px,3vw,20px); font-weight: 950; line-height: 1.35; }
    .monster-epithet { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.55; font-weight: 700; }
    .monster-arrow { display: grid; place-items: center; color: #6c8582; font-size: 22px; font-weight: 900; }

    .empty, .error, .loading { margin: 24px 0 0; padding: 18px; border-radius: 18px; background: rgba(255,255,255,.78); border: 1px solid var(--line); color: var(--muted); line-height: 1.7; text-align: center; white-space: pre-wrap; box-shadow: 0 10px 28px rgba(32,77,68,.08); }
    .error { color: var(--danger); }

    .detail-screen { position: fixed; inset: 0; z-index: 20; display: none; overflow: auto; background: linear-gradient(180deg, #eef9f4 0%, #d8f1e6 100%); overscroll-behavior: contain; }
    .detail-screen.active { display: block; }
    .detail-topbar { position: sticky; top: 0; z-index: 3; padding: max(10px, env(safe-area-inset-top)) 14px 10px; background: rgba(238,249,244,.9); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
    .detail-topbar-inner { width: min(100%, 1080px); margin: 0 auto; }
    .detail-shell { width: min(100%, 1080px); margin: 0 auto; padding: 22px 18px max(40px, env(safe-area-inset-bottom)); }
    .detail-heading { margin-bottom: 20px; }
    .detail-number { display: inline-flex; padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,.74); border: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .05em; }
    .detail-heading h2 { margin: 9px 0 0; font-size: clamp(28px,6vw,42px); line-height: 1.15; }
    .detail-heading p { margin: 8px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; font-weight: 800; }
    .detail-loading { padding: 24px; border-radius: 20px; background: rgba(255,255,255,.75); border: 1px solid var(--line); color: var(--muted); text-align: center; line-height: 1.7; font-weight: 800; }
    .detail-content { display: none; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); gap: 22px; align-items: start; }
    .detail-content.ready { display: grid; }
    .card-column { position: sticky; top: 78px; }
    .card-frame { padding: 10px; border-radius: 22px; background: rgba(255,255,255,.66); border: 1px solid rgba(255,255,255,.9); box-shadow: var(--shadow); }
    .card-frame img { width: 100%; height: auto; display: block; border-radius: 15px; background: #eef4f1; }
    .card-load-note { padding: 22px 12px; color: var(--muted); text-align: center; font-size: 13px; font-weight: 800; }
    .detail-panels { display: grid; gap: 14px; }
    .detail-panel { padding: 18px; border-radius: 20px; background: rgba(255,255,255,.84); border: 1px solid var(--line); box-shadow: 0 9px 25px rgba(32,77,68,.08); }
    .detail-panel h3 { margin: 0 0 11px; font-size: 16px; letter-spacing: .03em; }
    .detail-panel p { margin: 0; color: #304b4d; font-size: 14px; line-height: 1.8; white-space: pre-wrap; }
    .original-image-wrap { display: grid; place-items: center; padding: 4px 0 0; }
    .original-image-wrap img { display: block; width: min(100%, 520px); max-height: 620px; object-fit: contain; border-radius: 16px; background: #eef4f1; box-shadow: 0 8px 22px rgba(32,77,68,.10); }
    .overview-grid { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
    .overview-grid .overview-item:only-child { grid-column: 1 / -1; }
    .overview-item { min-width: 0; width: 100%; padding: 12px; border-radius: 14px; background: rgba(224,242,234,.58); }
    .overview-item dt { color: var(--muted); font-size: 11px; font-weight: 900; }
    .overview-item dd { width: 100%; margin: 5px 0 0; margin-inline-start: 0; font-size: 13px; line-height: 1.65; font-weight: 700; overflow-wrap: anywhere; }
    .stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
    .stat { padding: 11px 6px; text-align: center; border-radius: 14px; background: #edf7f2; }
    .stat span { display: block; color: var(--muted); font-size: 10px; font-weight: 900; }
    .stat strong { display: block; margin-top: 3px; font-size: 22px; line-height: 1; }
    .strength-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
    .strength-box { padding: 14px; border-radius: 15px; background: rgba(43,159,120,.08); }
    .strength-box.weak { background: rgba(215,109,77,.08); }
    .strength-box strong { display: block; margin-bottom: 7px; font-size: 12px; }
    .strength-box p { font-size: 13px; line-height: 1.7; }
    .item-list { display: grid; gap: 10px; }
    .item-card { padding: 13px 14px; border-radius: 15px; background: rgba(224,242,234,.54); }
    .item-card strong { display: block; font-size: 14px; line-height: 1.45; }
    .item-card p { margin-top: 5px; font-size: 13px; line-height: 1.7; }
    .ability-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
    .ability-tag { display: inline-flex; padding: 4px 8px; border-radius: 999px; background: rgba(43,159,120,.11); color: #286d58; font-size: 11px; font-weight: 900; }
    .muted-value { color: #819391 !important; }

    @media (max-width: 760px) {
      .category-list { grid-template-columns: 1fr; }
      .detail-content.ready { grid-template-columns: 1fr; }
      .card-column { position: static; }
      .card-frame { width: min(100%, 420px); margin: 0 auto; }
    }
    @media (max-width: 480px) {
      .app { padding-inline: 12px; }
      .topbar { margin-inline: -12px; padding-inline: 12px; }
      .category-button { grid-template-columns: 68px 1fr; gap: 14px; padding: 16px; }
      .category-mark { width: 60px; }
      .monster-button { grid-template-columns: 68px 72px 1fr 24px; }
      .thumbnail-tile { width: 68px; min-height: 76px; padding: 6px; }
      .monster-thumbnail { width: 56px; height: 56px; }
      .monster-meta { padding: 13px 12px; }
      .overview-grid, .strength-grid { grid-template-columns: 1fr; }
      .stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .detail-shell { padding-inline: 12px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
    }