:root{
  --bg:#100D08;
  --bg-raised:#1C160D;
  --bg-card:#17120A;
  --gold:#C9A227;
  --gold-bright:#E9C468;
  --gold-dim:rgba(201,162,39,.34);
  --gold-faint:rgba(201,162,39,.12);
  --cream:#F4ECD8;
  --cream-dim:#AB9F82;
  --on-gold:#18130A;
}

*{ box-sizing:border-box; }
body{
  margin:0; min-height:100vh; display:flex; flex-direction:column; align-items:center;
  gap:22px; padding:40px 16px 60px;
  background:
    radial-gradient(circle at 1px 1px, var(--gold-faint) 1px, transparent 0) 0 0/15px 15px,
    var(--bg);
  color:var(--cream);
  font-family:-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  line-height:1.7;
}
button{ font:inherit; color:inherit; background:none; border:none; padding:0; cursor:pointer; text-align:inherit; }
.mincho{ font-family:'Shippori Mincho','Hiragino Mincho ProN',serif; }

.intro{ max-width:340px; text-align:center; }
.intro h1{ font-size:19px; margin:0 0 6px; color:var(--gold-bright); letter-spacing:.02em; }
.intro p{ font-size:12.5px; color:var(--cream-dim); margin:0; }

/* ---------- phone frame ---------- */
.frame{
  position:relative; width:320px; height:660px;
  border:1px solid var(--gold-dim); border-radius:22px;
  background:var(--bg); overflow:hidden; flex:none;
  box-shadow:0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4), 0 0 40px var(--gold-faint);
  display:flex; flex-direction:column;
}
.frame::before, .frame::after{
  content:'+'; position:absolute; font-size:11px; color:var(--gold-dim); z-index:5; line-height:1; pointer-events:none;
}
.frame::before{ top:7px; left:11px; }
.frame::after{ bottom:7px; right:11px; }

.frame-status{
  height:34px; border-bottom:1px solid var(--gold-dim);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; letter-spacing:.14em; color:var(--gold-bright);
  background:linear-gradient(180deg, var(--bg-raised), var(--bg));
  position:relative; flex:none;
}
.frame-status::before, .frame-status::after{
  content:'✦'; position:absolute; top:50%; transform:translateY(-50%);
  font-size:8px; color:var(--gold-dim); pointer-events:none;
}
.frame-status::before{ left:46px; }
.frame-status::after{ right:16px; }
.frame-status .back{
  position:absolute; left:6px; top:3px; width:28px; height:26px; border-radius:6px;
  display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--gold-bright); z-index:2;
}
.frame-status .back:active{ background:var(--bg-raised); }
.frame-status .back.hidden{ display:none; }

.frame-stage{ position:relative; flex:1; overflow:hidden; display:flex; flex-direction:column; }
.frame-inner{ position:relative; flex:1; overflow:hidden; }

.screen{
  position:absolute; inset:0; overflow-y:auto; overflow-x:hidden;
  opacity:0; visibility:hidden; pointer-events:none; padding:18px;
  display:flex; flex-direction:column; background:var(--bg);
}
.screen.active{ opacity:1; visibility:visible; pointer-events:auto; }
.screen.nopad{ padding:0; }
@media (prefers-reduced-motion:no-preference){
  .screen{ transition:opacity .18s ease; }
}

.bottomnav{ display:flex; border-top:1px solid var(--gold-dim); background:var(--bg-raised); flex:none; }
.bottomnav.hidden{ display:none; }
.bottomnav button{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  height:58px; font-size:10.5px; letter-spacing:.06em; color:var(--cream-dim);
}
.bottomnav button.active{ color:var(--gold-bright); font-weight:700; }

/* ---------- ui primitives ---------- */
.pill{ display:inline-block; border:1px solid var(--gold-dim); border-radius:999px; padding:3px 12px; font-size:10.5px; letter-spacing:.06em; color:var(--gold-bright); background:var(--gold-faint); }
.chip{ display:inline-flex; align-items:center; border:1px solid var(--gold-dim); border-radius:999px; padding:8px 14px; font-size:12px; color:var(--cream-dim); }
.chip.selected{ border-color:var(--gold); background:var(--gold); color:var(--on-gold); font-weight:700; }
.chip:active{ transform:scale(.96); }

.btn{ display:flex; align-items:center; justify-content:center; border-radius:8px; padding:14px; font-size:14px; font-weight:600; letter-spacing:.03em; width:100%; }
.btn-primary{ background:linear-gradient(180deg, var(--gold-bright), var(--gold)); color:var(--on-gold); box-shadow:0 6px 18px rgba(201,162,39,.22); }
.btn-primary:active{ opacity:.85; }
.btn-secondary{ background:transparent; color:var(--cream); border:1px solid var(--gold-dim); font-weight:500; }
.btn-secondary:active{ background:var(--bg-raised); }
.btn-toggle{ border:1px solid var(--gold-dim); border-radius:8px; padding:9px 13px; font-size:12px; color:var(--cream-dim); }
.btn-toggle.selected{ background:var(--gold); color:var(--on-gold); border-color:var(--gold); font-weight:700; }

.card{ border:1px solid var(--gold-dim); border-radius:10px; padding:13px; text-align:left; width:100%; background:var(--bg-card); }
.card:active{ background:var(--bg-raised); }

.imgbox{
  border:1px solid var(--gold-dim); border-radius:10px; flex:none; position:relative;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 50% 32%, var(--gold-faint), transparent 72%), var(--bg-card);
  font-size:0; color:transparent;
}
.imgbox::before{ content:'🥃'; font-size:22px; line-height:1; color:var(--gold-bright); filter:drop-shadow(0 0 6px rgba(201,162,39,.4)); }

/* ---------- mosaic (home) : タイポグラフィー・コラージュ（横書き・縦書きのみ） ---------- */
.mosaic{ display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(16,1fr); height:100%; background:var(--bg); }
.word{
  display:flex; align-items:center; justify-content:center;
  white-space:nowrap; line-height:0.9;
  font-family:'Zen Kaku Gothic New','Hiragino Sans',sans-serif;
  color:var(--gold-bright); background:none; border:none; padding:1px; margin:0;
}
button.word{ cursor:pointer; }
button.word:active{ background:var(--bg-raised); }
.word.filler{ pointer-events:none; color:var(--cream-dim); opacity:.5; }
.word.vert{ writing-mode:vertical-rl; text-orientation:upright; line-height:0.95; }
.word.selected{ background:var(--gold) !important; color:var(--on-gold) !important; opacity:1 !important; }

/* ---------- 注文トレイ ---------- */
.order-tray{ border-top:1px solid var(--gold-dim); background:var(--bg-raised); padding:10px 14px; display:flex; flex-direction:column; gap:8px; flex:none; }
.order-tray.hidden{ display:none; }
.tray-chips{ display:flex; gap:6px; flex-wrap:wrap; }

/* ---------- mini mosaic (log detail) ---------- */
.mosaic-mini{ display:grid; height:130px; grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr); gap:0; background:var(--bg-card); border-radius:8px; overflow:hidden; }
.tile{ background:var(--bg-card); display:flex; align-items:center; justify-content:center; color:var(--gold-bright); text-align:center; padding:2px; line-height:0.96; letter-spacing:-0.02em; white-space:nowrap; }
.tile:active{ background:var(--bg-raised); }
.tile.v{ writing-mode:vertical-rl; text-orientation:upright; }
.mosaic-mini .tile{ font-family:'Shippori Mincho','Hiragino Mincho ProN',serif; }

/* ---------- 各種バー（注文とのつながり／味わい 共通） ---------- */
.section-title{ font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--gold-bright); margin:0 0 12px; text-align:center; }
.section-title::before{ content:'✦'; display:block; color:var(--gold); font-size:10px; margin-bottom:8px; opacity:.85; }
.conn-list{ display:flex; flex-direction:column; gap:10px; }
.conn-row{ display:flex; align-items:center; gap:8px; }
.conn-label{ width:78px; flex:none; font-size:11.5px; color:var(--cream-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.match-track{ flex:1; height:7px; border-radius:999px; background:var(--bg-raised); border:1px solid var(--gold-dim); overflow:hidden; }
.match-fill{ height:100%; background:linear-gradient(90deg, var(--gold), var(--gold-bright)); border-radius:999px 0 0 999px; }
.conn-pct{ width:34px; flex:none; text-align:right; font-size:11px; color:var(--gold-bright); font-variant-numeric:tabular-nums; }

/* ---------- マスターのひとこと ---------- */
.master-note{ border:1px solid var(--gold-dim); border-radius:10px; padding:16px 14px 12px; background:var(--bg-card); position:relative; }
.master-note::before{ content:'“'; position:absolute; top:-14px; right:14px; font-family:'Shippori Mincho',serif; font-size:34px; color:var(--gold-dim); background:var(--bg); padding:0 6px; line-height:1; }
.master-label{ font-size:10.5px; letter-spacing:.14em; color:var(--gold); margin-bottom:5px; }
.master-note p{ margin:0; font-size:13px; line-height:1.6; color:var(--cream); }

/* ---------- 歴史の短文＋詳しく見る ---------- */
.history-short{ font-size:12.5px; color:var(--cream-dim); line-height:1.65; margin:0 0 8px; text-align:center; }
.link-more{ display:block; font-size:12px; font-weight:600; color:var(--gold-bright); text-align:center; }
.hidden{ display:none !important; }

/* ---------- 結果画面の下部固定フッター ---------- */
.result-footer{ position:sticky; bottom:-18px; left:0; right:0; display:flex; border-top:1px solid var(--gold-dim); background:var(--bg-raised); margin:26px -18px -18px; }
.footer-btn{ flex:1; padding:16px; font-size:13px; font-weight:600; letter-spacing:.03em; text-align:center; color:var(--gold-bright); }
#btn-reorder{ border-left:1px solid var(--gold-dim); color:var(--cream-dim); font-weight:500; }
#btn-like.saved{ background:var(--gold); color:var(--on-gold); }

/* ---------- timeline ---------- */
.timeline{ position:relative; padding-left:20px; }
.timeline::before{ content:''; position:absolute; left:0; top:4px; bottom:4px; width:1px; background:var(--gold-dim); }
.tl-node{ position:relative; padding-bottom:16px; }
.tl-node::before{ content:''; position:absolute; left:-24px; top:2px; width:8px; height:8px; border-radius:50%; background:var(--gold-bright); box-shadow:0 0 6px rgba(201,162,39,.5); }
.tl-node h3{ font-size:14px; margin:0 0 4px; font-weight:700; color:var(--gold-bright); }
.tl-node p{ font-size:11.5px; color:var(--cream-dim); margin:0; line-height:1.6; }

.stack{ display:flex; flex-direction:column; gap:14px; }