/* AIタウン 共通スタイル(ミラーシム テーマ)
   新しいページを増やすときは、このファイルをそのまま <link> して使い回してください。 */
:root{
  --wood-dark:#241209; --wood-mid:#4a2a15; --wood-light:#6e441f; --wood-gloss:rgba(255,232,196,.4);
  --cream-a:#fbead2; --cream-b:#f6dfb8; --milktea:#e7b978; --milktea-light:#fbe9c9; --milktea-deep:#c9944f;
  --ink:#5a3c22; --ink-soft:#a3825f;
  --card:#fffaf1; --card-line:#f0dcb2; --accent:#c9843f; --accent-soft:#fbe6c4;
  --tea-dark:#d9a75c; --tapioca-dark:#8a5a2e; --tapioca-hi:#e8bd82;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; font-family:'Zen Kaku Gothic New',sans-serif; color:var(--ink);
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  display:flex; min-height:100%;
}
a{ color:inherit; }

/* --- 左右の木製ピラー --- */
.pillar{
  flex:0 0 76px; position:relative;
  background:
    linear-gradient(100deg, transparent 28%, var(--wood-gloss) 44%, transparent 62%),
    repeating-linear-gradient(90deg,
      var(--wood-mid) 0 7px, var(--wood-dark) 7px 11px,
      var(--wood-light) 11px 16px, var(--wood-mid) 16px 22px);
  box-shadow: inset 10px 0 22px rgba(0,0,0,.45), inset -10px 0 22px rgba(0,0,0,.45);
}
.pillar.right{ transform:scaleX(-1); }
@media (max-width:820px){ .pillar{ display:none; } }

/* --- 中央ステージ(タピオカミルクティー) --- */
.stage{
  flex:1 1 auto; position:relative; overflow:hidden; min-height:100vh;
  background:linear-gradient(180deg, var(--cream-a), var(--cream-b));
}
#tapiocaCanvas{ position:absolute; inset:0; z-index:0; touch-action:none; }
.splash{
  position:absolute; left:-10%; right:-10%; top:-130%; height:150%;
  background:linear-gradient(180deg, var(--tea-dark) 0%, var(--milktea) 55%, var(--milktea-light) 100%);
  border-radius:0 0 48% 48% / 0 0 38% 38%;
  filter:blur(2px); opacity:0; pointer-events:none; z-index:2;
}
.splash.active{ animation:splashDown 1.8s linear forwards; }
@keyframes splashDown{
  0%{ transform:translateY(0); opacity:.95; }
  70%{ transform:translateY(88%); opacity:.92; }
  100%{ transform:translateY(102%); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .splash.active{ animation-duration:.3s; } }
.wrap{ position:relative; z-index:1; max-width:760px; margin:0 auto; padding:0 1.4rem 3rem; }
.site-header{ text-align:center; padding:3.4rem 1rem 1.2rem; }
.site-header h1{
  font-family:'Shippori Mincho',serif; font-weight:800; font-size:clamp(2.4rem,7vw,3.6rem);
  margin:0 0 .6rem; letter-spacing:.14em; color:var(--ink);
  text-shadow: 0 1px 0 rgba(255,255,255,.6), 0 3px 10px rgba(105,66,20,.25);
}
.site-header p{ color:var(--ink-soft); margin:0; font-size:.95rem; line-height:1.8; }
.back-link{
  display:inline-block; margin:1.2rem 0 0; font-size:.85rem; color:var(--ink-soft);
  text-decoration:none; border-bottom:1px solid var(--ink-soft);
}

/* --- ハブページ：作品カード一覧 --- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; margin-top:1rem; }
.card{
  display:block; background:var(--card); border:1px solid var(--card-line); border-radius:18px;
  padding:1.3rem 1.2rem; text-decoration:none; color:var(--ink);
  box-shadow:0 6px 18px rgba(90,58,20,.1);
  transition:transform .15s ease, border-color .15s ease;
}
.card:hover{ transform:translateY(-3px); border-color:var(--accent); }
.card .emoji{ font-size:1.8rem; display:block; margin-bottom:.6rem; }
.card h2{ font-family:'Shippori Mincho',serif; font-size:1.1rem; margin:0 0 .4rem; font-weight:700; }
.card p{ margin:0 0 .7rem; font-size:.85rem; color:var(--ink-soft); line-height:1.6; }
.card .tag{
  display:inline-block; font-size:.72rem; color:var(--accent); background:var(--accent-soft);
  padding:.2rem .6rem; border-radius:999px;
}
.section-title{
  font-size:.85rem; color:var(--ink-soft); margin:2.2rem 0 0; letter-spacing:.02em;
}
.empty-note{
  color:var(--ink-soft); font-size:.85rem; border:1px dashed var(--card-line);
  border-radius:14px; padding:1rem 1.2rem; margin-top:1rem; background:rgba(255,250,241,.6);
}