/* エコギの星座ログ：観察室の夜空ステージ → 選んだ夜のカード → 観測データ */
.ecsk-root{
  --ecsk-night:#0B1020; --ecsk-deep:#121a30; --ecsk-line:#2a3556;
  --ecsk-ink:#E7E3D8; --ecsk-dim:#9aa3bd; --ecsk-star:#F2D9A0; --ecsk-teal:#7FC8C0;
  /* フォントは読み込まない。明朝はシステムフォント、他はテーマを継承 */
  --ecsk-display:"Hiragino Mincho ProN","Yu Mincho",serif;
  --ecsk-mono:ui-monospace,Menlo,Consolas,monospace;
  background:var(--ecsk-night);color:var(--ecsk-ink);
  padding:20px max(16px,env(safe-area-inset-left,0px)) 28px;margin:24px 0;box-sizing:border-box;
}
.ecsk-root *,.ecsk-root *::before,.ecsk-root *::after{box-sizing:border-box}
.ecsk-wrap{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.ecsk-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ecsk-title{font-family:var(--ecsk-display);font-weight:700;font-size:clamp(20px,4.6vw,28px);margin:0;letter-spacing:.06em;text-wrap:balance;color:var(--ecsk-ink);border:0;padding:0;background:none}
.ecsk-pill{font-family:var(--ecsk-mono);font-size:11px;letter-spacing:.14em;text-transform:lowercase;
  border:1px solid var(--ecsk-line);border-radius:999px;padding:4px 12px;color:var(--ecsk-star);display:inline-flex;gap:8px;align-items:center}
.ecsk-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ecsk-star);box-shadow:0 0 8px var(--ecsk-star);animation:ecsk-blink 2.4s infinite}
@keyframes ecsk-blink{50%{opacity:.25}}
.ecsk-lead{display:grid;gap:4px}
.ecsk-sub{margin:0;color:var(--ecsk-dim);font-size:13px}
.ecsk-empty{color:var(--ecsk-dim);padding:24px 0;margin:0}

/* ヒーロー（油彩の青空＋黄土色の大地）の続き。色は symbol2.jpg の実測値（README参照） */
.ecsk-stage{position:relative;height:clamp(360px,64vw,500px);border-radius:14px;overflow:hidden;touch-action:pan-y;
  background:
    radial-gradient(90% 40% at 50% 104%,rgba(138,114,46,.55) 0%,rgba(138,114,46,0) 70%),
    linear-gradient(180deg,#467186 0%,#355a7c 16%,#1c2a4f 42%,#111830 70%,#0b1020 100%)}
.ecsk-stage::after{content:"";position:absolute;left:-5%;right:-5%;bottom:0;height:13%;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,#8a722e,#3a3020);border-radius:60% 40% 0 0/100% 100% 0 0;opacity:.92}
.ecsk-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ecsk-stage.is-live .ecsk-still{display:none}
.ecsk-stage canvas{display:block;width:100%;height:100%;cursor:grab}
.ecsk-stage canvas.ecsk-paint{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:.55;z-index:1;cursor:auto}
.ecsk-hint,.ecsk-nav{z-index:2}
.ecsk-hint{position:absolute;left:14px;bottom:12px;font-family:var(--ecsk-mono);font-size:11px;color:#e9e2c8;pointer-events:none;letter-spacing:.06em}
.ecsk-nav{position:absolute;right:12px;bottom:10px;display:flex;gap:8px}
.ecsk-nav[hidden],.ecsk-hint[hidden]{display:none}
.ecsk-nav button{font:inherit;font-size:12px;color:var(--ecsk-ink);background:rgba(11,16,32,.7);border:1px solid var(--ecsk-line);
  border-radius:999px;padding:6px 12px;cursor:pointer;line-height:1.4}
.ecsk-nav button:hover{border-color:var(--ecsk-star)}
.ecsk-nav button:focus-visible{outline:2px solid var(--ecsk-star);outline-offset:2px}
.ecsk-nav button:disabled{opacity:.35;cursor:default}

.ecsk-card{background:var(--ecsk-deep);border:1px solid var(--ecsk-line);border-radius:14px;padding:18px 20px;display:grid;gap:14px}
.ecsk-meta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;font-family:var(--ecsk-mono);font-size:12px;color:var(--ecsk-dim)}
.ecsk-meta b{color:var(--ecsk-star);font-weight:500}
.ecsk-mood{font-family:inherit;color:var(--ecsk-ink)}
.ecsk-say{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start}
.ecsk-face{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--ecsk-display);font-weight:700;font-size:15px}
.ecsk-face{overflow:hidden}
.ecsk-face img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;display:block}
.ecsk-face.eco{background:#e6b34d;color:#2a2410}
.ecsk-face.eco img{object-position:50% 55%}
.ecsk-face.rep{width:34px;height:34px;font-size:12px;background:#24304f;color:var(--ecsk-ink);border:1px solid var(--ecsk-line)}
.ecsk-face.rep[data-char="isogashi"]{background:#7a8ba6}
.ecsk-face.rep[data-char="diffiko"]{background:#c98ba6}
.ecsk-face.rep[data-char="ecochiru"]{background:#6fb3c9}
.ecsk-say.reply{grid-template-columns:34px 1fr;margin-left:22px}
.ecsk-name{font-size:12px;color:var(--ecsk-dim);margin-bottom:3px}
.ecsk-text{font-family:var(--ecsk-display);font-size:clamp(16px,3.8vw,19px);line-height:1.75;margin:0;min-width:0;color:var(--ecsk-ink)}
.ecsk-say.reply .ecsk-text{font-family:inherit;font-size:14px;line-height:1.7;color:#cfd3df}
.ecsk-fade{transition:opacity .35s}
.ecsk-fade.is-out{opacity:0}

.ecsk-obs h3{font-family:var(--ecsk-display);font-size:15px;font-weight:500;margin:0 0 10px;letter-spacing:.05em;color:var(--ecsk-ink)}
.ecsk-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.ecsk-chips li{font-family:var(--ecsk-mono);font-size:12px;border:1px solid var(--ecsk-line);border-radius:8px;padding:6px 10px;color:var(--ecsk-teal);font-variant-numeric:tabular-nums;margin:0}
.ecsk-chips li span{color:var(--ecsk-dim);margin-right:6px}
@media (max-width:480px){.ecsk-hint{display:none}}
@media (prefers-reduced-motion:reduce){.ecsk-pill::before{animation:none}.ecsk-fade{transition:none}}