/* MIRAI Design System — theme: MUGEN（むげん合成 / infinite-craft 系）
   Aesthetic: 和紙ノート × 静かな錬金術。明るいキャンバス・墨インク・藍の単一アクセント・
   ヘアラインのタクタイルなピル。Anti-AI-tell: glow soup無し / 単一アクセント / 既定font回避。
   Load AFTER base.css.                                                                  */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=Zen+Old+Mincho:wght@600;700;900&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root,[data-theme="light"]{
  --ds-bg:#f4f1e8;            --ds-surface:#fffdf7;
  --ds-text:#1b1b20;          --ds-text-dim:rgba(27,27,32,.54);
  --ds-line:rgba(27,27,32,.16); --ds-line-soft:rgba(27,27,32,.07);
  --ds-accent:#1f4f8f;        --ds-accent-ink:#fffdf7;   --ds-flag:#c8341c;

  --ds-font-display:'Zen Old Mincho',serif;
  --ds-font-display-en:'Zen Old Mincho',serif;
  --ds-font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --ds-font-body:'Zen Kaku Gothic New',system-ui,sans-serif;
  --ds-radius:14px;

  --mg-pill-bg:#fffdf7;
  --mg-pill-shadow:0 2px 0 rgba(27,27,32,.10), 0 10px 22px -16px rgba(27,27,32,.5);
  --mg-canvas:#efe9da;
}

/* editorial glow/grainは静かなノートに不要 — 殺す */
.ds-glow,.ds-glow::before,.ds-glow::after{background-image:none!important}

/* うっすら方眼の和紙キャンバス */
.mg-canvas{
  background-color:var(--mg-canvas);
  background-image:
    repeating-linear-gradient(0deg ,transparent 0 27px,var(--ds-line-soft) 27px 28px),
    repeating-linear-gradient(90deg,transparent 0 27px,var(--ds-line-soft) 27px 28px);
  border:1px solid var(--ds-line);border-radius:var(--ds-radius);
}

/* 元素ピル（ドラッグ可能・タクタイル） */
.mg-pill{
  position:absolute;display:inline-flex;align-items:center;gap:.42rem;
  font-family:var(--ds-font-body);font-weight:700;font-size:.98rem;color:var(--ds-text);
  background:var(--mg-pill-bg);border:1px solid var(--ds-line);border-radius:999px;
  padding:.46rem .82rem;cursor:grab;user-select:none;white-space:nowrap;
  box-shadow:var(--mg-pill-shadow);touch-action:none;
  transition:transform .12s cubic-bezier(.2,.8,.2,1),box-shadow .12s,border-color .12s;
}
.mg-pill:active{cursor:grabbing}
.mg-pill.is-drag{transform:scale(1.06);box-shadow:0 6px 0 rgba(27,27,32,.12),0 22px 40px -18px rgba(27,27,32,.6);z-index:50}
.mg-pill.is-target{border-color:var(--ds-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--ds-accent) 26%,transparent),var(--mg-pill-shadow)}
.mg-pill .emo{font-size:1.12rem;line-height:1}
.mg-pill.is-new{animation:mg-pop .42s cubic-bezier(.2,1.4,.4,1)}
@keyframes mg-pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1)}}

/* パレット行（基本元素のソース） */
.mg-source{position:static;background:var(--ds-surface)}

/* 図鑑グリッド */
.mg-dex-item{display:flex;align-items:center;gap:.5rem;padding:.5rem .6rem;border-radius:10px;
  border:1px solid var(--ds-line-soft);background:var(--ds-surface);cursor:pointer;
  font-weight:500;font-size:.9rem;transition:border-color .12s,transform .12s}
.mg-dex-item:hover{border-color:var(--ds-line);transform:translateY(-1px)}
.mg-dex-item .emo{font-size:1.06rem}
.mg-dex-item.first .badge{color:var(--ds-flag);font-family:var(--ds-font-mono);font-size:.62rem}

/* HUDチップ */
.mg-chip{display:inline-flex;align-items:center;gap:.4rem;background:var(--ds-surface);
  border:1px solid var(--ds-line);border-radius:999px;padding:.36rem .72rem;
  font-family:var(--ds-font-mono);font-weight:500;font-size:.82rem;color:var(--ds-text)}
.mg-chip b{font-family:var(--ds-font-display-en);color:var(--ds-accent)}

/* トースト（新発見） */
.mg-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(120%);
  background:var(--ds-text);color:var(--ds-bg);border-radius:12px;padding:.7rem 1.1rem;
  font-weight:700;font-size:.95rem;box-shadow:0 16px 40px -16px rgba(0,0,0,.6);z-index:200;
  display:flex;align-items:center;gap:.55rem;transition:transform .4s cubic-bezier(.2,.9,.2,1)}
.mg-toast.show{transform:translateX(-50%) translateY(0)}
.mg-toast .emo{font-size:1.2rem}
.mg-toast .first{color:var(--ds-accent);font-family:var(--ds-font-mono);font-size:.7rem;letter-spacing:.08em}

/* ボタン（むげん用・落ち着いた藍） */
.mg-btn{font-family:var(--ds-font-body);font-weight:700;font-size:.9rem;border:none;cursor:pointer;
  background:var(--ds-accent);color:var(--ds-accent-ink);border-radius:10px;padding:.6rem 1rem;
  display:inline-flex;align-items:center;gap:.45rem;transition:transform .1s,filter .1s}
.mg-btn:active{transform:translateY(1px)}
.mg-btn--ghost{background:var(--ds-surface);color:var(--ds-text);border:1px solid var(--ds-line)}