/* 引いた札の見え方。index.html・story.html・all.html で共用。--card-bg / --card-ink / --card-edge / --muted は各ページの :root で定義する */
.card{
  width:100%; aspect-ratio:3/2;
  border-radius:28px; background:var(--card-bg); color:var(--card-ink);
  border:3px solid var(--card-edge); box-shadow:8px 8px 0 var(--card-edge);
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  padding:36px 28px 40px; position:relative; overflow:hidden; isolation:isolate; transform:translateZ(0);
  transition:border-color .3s, box-shadow .3s;
}
.card > *{position:relative; z-index:1}
.card .text{font-size:clamp(22px,6vw,29px); line-height:1.5; font-weight:700; letter-spacing:.01em; white-space:pre-line; margin:0; word-break:keep-all; overflow-wrap:anywhere; text-wrap:balance}

.card .no{position:absolute; right:14px; bottom:12px; font-size:13px; font-weight:700; color:var(--card-edge); border:2.5px solid var(--card-edge); border-radius:999px; padding:2px 10px 4px; background:var(--card-bg); letter-spacing:.06em; line-height:1.2}
.card .hash{position:absolute; left:18px; bottom:16px; font-size:13px; font-weight:700; color:var(--muted); opacity:.8; letter-spacing:.04em; line-height:1; z-index:1}
.card .wm{position:absolute; left:50%; top:50%; width:84%; height:auto; color:var(--card-edge); opacity:.1; transform:translate(-50%,-50%) rotate(-10deg); pointer-events:none; z-index:0}
.card .spark{position:absolute; color:var(--card-edge); pointer-events:none; z-index:0}
.card .spark.a{right:18px; top:14px; width:22px} .card .spark.b{right:48px; top:40px; width:12px} .card .spark.c{left:18px; top:18px; width:14px}
.card .brand{position:absolute; left:16px; bottom:11px; font-size:11px; color:var(--muted); letter-spacing:.25em}