/* 公開ページ（/events・/card・/d）の見た目。

   アプリ本体（style.css）とは別に持つ。あちらは 64KB あり、
   タブバーやシートなど、読み物のページには要らないものが大半を占めるため。
   配色だけをアプリと揃えて、構造は素の文書に寄せてある。

   これらのページは Service Worker の管轄外（scope が /play のため）。
   キャッシュは Cache-Control で edge に任せる。 */

:root{
  --bg:#141312;
  --surface:#1c1a18;
  --surface-2:#232120;
  --line:#332e29;
  --text:#ede8e0;
  --muted:#9a9186;
  --faint:#6f665c;
  --gold:#c9a961;
  --gold-soft:#e6cf9a;
  --gold-dim:#8d7541;
  --amber:#e0a32e;   --amethyst:#9264c6; --emerald:#3fa36b;
  --ruby:#d1524a;    --sapphire:#4181c9; --steel:#8d97a4;
}

*{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Hiragino Sans","Yu Gothic UI","Noto Sans JP",system-ui,sans-serif;
  line-height:1.75;
  font-size:16px;
}

a{ color:var(--gold); text-decoration:none }
a:hover{ text-decoration:underline }

.wrap{ max-width:860px; margin:0 auto; padding:0 16px }

/* ---- 上下の帯 ---- */
.site-head{
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#1b1917,var(--bg));
}
.site-head .wrap{
  display:flex; align-items:center; gap:12px;
  min-height:60px; flex-wrap:wrap;
}
.site-head img{ height:26px; width:auto; display:block }
.site-head .tag{ color:var(--muted); font-size:13px }
.site-head .spacer{ flex:1 }

.site-foot{
  margin-top:56px; padding:28px 0 48px;
  border-top:1px solid var(--line);
  color:var(--faint); font-size:13px;
}
.site-foot a{ color:var(--muted) }
.site-foot p{ margin:.5em 0 }

/* ---- 見出し ---- */
h1{ font-size:26px; line-height:1.4; margin:28px 0 6px; letter-spacing:.01em }
h2{ font-size:19px; margin:36px 0 12px; color:var(--gold-soft) }
.lede{ color:var(--muted); margin:0 0 4px; font-size:15px }
.updated{ color:var(--faint); font-size:12.5px; margin:6px 0 0 }

/* ---- アプリへの導線 ---- */
.cta{
  display:block; margin:24px 0;
  padding:16px 20px; border-radius:14px;
  background:linear-gradient(180deg,#2b2519,#221e17);
  border:1px solid var(--gold-dim);
  color:var(--text); text-decoration:none;
}
.cta:hover{ text-decoration:none; border-color:var(--gold) }
.cta b{ display:block; color:var(--gold-soft); font-size:17px }
.cta span{ display:block; color:var(--muted); font-size:13.5px; margin-top:2px }

/* ---- 絞り込みリンク ---- */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 }
.chips a, .chips span{
  display:inline-block; padding:5px 12px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface);
  color:var(--muted); font-size:13.5px; text-decoration:none;
}
.chips a:hover{ border-color:var(--gold-dim); color:var(--gold-soft); text-decoration:none }
.chips .on{ background:#2b2519; border-color:var(--gold-dim); color:var(--gold-soft) }

.monthnav{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:18px 0 4px;
  border:1px solid var(--line); border-radius:12px;
  background:var(--surface); padding:10px 14px;
}
.monthnav b{ font-size:17px; color:var(--gold-soft) }
.monthnav .dim{ color:var(--faint) }

/* ---- イベント ---- */
.day{ margin:26px 0 0 }
.day > h3{
  margin:0 0 8px; font-size:15px; color:var(--gold);
  border-bottom:1px solid var(--line); padding-bottom:6px;
}
.ev{
  border:1px solid var(--line); border-radius:12px;
  background:var(--surface); padding:12px 14px; margin:8px 0;
}
.ev .row1{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap }
.ev .time{ color:var(--gold-soft); font-weight:700; font-variant-numeric:tabular-nums }
.ev .cat{
  font-size:12.5px; padding:2px 9px; border-radius:999px;
  background:#2b2519; border:1px solid var(--gold-dim); color:var(--gold-soft);
}
.ev .shop{ font-weight:700; margin:4px 0 0 }
.ev .meta{ color:var(--muted); font-size:13.5px; margin:2px 0 0 }
.ev .meta a{ color:var(--muted); text-decoration:underline }

.empty{
  border:1px dashed var(--line); border-radius:12px;
  padding:26px 18px; text-align:center; color:var(--muted);
}

/* ---- カード ---- */
.card-top{ display:flex; gap:22px; flex-wrap:wrap; align-items:flex-start }
.card-top img{
  width:280px; max-width:100%; border-radius:12px; display:block;
  background:var(--surface-2);
}
.card-top .side{ flex:1; min-width:260px }

.specs{ margin:14px 0; border-collapse:collapse; width:100% }
.specs th, .specs td{
  text-align:left; padding:7px 10px; border-bottom:1px solid var(--line);
  font-size:14.5px; vertical-align:top;
}
.specs th{ color:var(--muted); font-weight:400; white-space:nowrap; width:8em }

.rulestext{
  white-space:pre-wrap; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:14px 16px; margin:14px 0; font-size:15px;
}
.flavor{ color:var(--faint); font-style:italic; font-size:14px }

.usage{
  border:1px solid var(--gold-dim); border-radius:12px;
  background:linear-gradient(180deg,#241f18,#1d1a16);
  padding:14px 16px; margin:18px 0;
}
.usage .big{ font-size:34px; font-weight:700; color:var(--gold-soft); line-height:1.2 }
.usage .note{ color:var(--muted); font-size:13px; margin-top:4px }

.inkdot{
  display:inline-block; width:.75em; height:.75em; border-radius:50%;
  margin-right:.35em; vertical-align:baseline;
}

/* ---- デッキ ---- */
.deck-sum{ display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 }
.deck-sum div{
  flex:1; min-width:110px; text-align:center;
  border:1px solid var(--line); border-radius:12px;
  background:var(--surface); padding:10px 8px;
}
.deck-sum b{ display:block; font-size:24px; color:var(--gold-soft) }
.deck-sum span{ font-size:12.5px; color:var(--muted) }

.deck-grid{
  display:grid; gap:10px; margin:12px 0;
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
}
.deck-grid figure{ margin:0 }
.deck-grid img{ width:100%; border-radius:8px; display:block; background:var(--surface-2) }
.deck-grid figcaption{
  font-size:12px; color:var(--muted); margin-top:3px;
  display:flex; justify-content:space-between; gap:6px;
}
.deck-grid figcaption b{ color:var(--gold-soft) }

.codebox{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:19px; letter-spacing:.06em; color:var(--gold-soft);
  background:var(--surface); border:1px solid var(--line);
  border-radius:10px; padding:10px 14px; display:inline-block; margin:6px 0;
  word-break:break-all;
}

/* ---- たためる一覧（カード索引の弾ごと） ---- */
.setbox{
  border:1px solid var(--line); border-radius:12px;
  background:var(--surface); margin:10px 0; padding:0 14px;
}
.setbox > summary{
  cursor:pointer; padding:14px 0; font-weight:700; color:var(--gold-soft);
  list-style-position:inside;
}
.setbox > summary::marker{ color:var(--gold-dim) }
.setbox[open] > summary{ border-bottom:1px solid var(--line) }
.setbox .linklist{ margin:0 0 10px }

/* ---- 一覧 ---- */
.linklist{ list-style:none; padding:0; margin:12px 0 }
.linklist li{ border-bottom:1px solid var(--line) }
.linklist a{ display:block; padding:11px 4px; color:var(--text) }
.linklist a:hover{ color:var(--gold-soft); text-decoration:none }
.linklist .sub{ color:var(--faint); font-size:13px }

@media (max-width:520px){
  h1{ font-size:22px }
  .card-top img{ width:100%; max-width:320px; margin:0 auto }
}