/* 焚火 — このページだけの組み方。色・余白・角・書体は tokens.css、ボタン等の部品は styles.css の ng-* を使う。
   README の禁止事項どおり backdrop-filter・filter: blur は使わない（暗がりは半透明の地で出す） */

.tk { min-height: 100svh; display: flex; flex-direction: column; }
.tk-head { padding-block: var(--space-12); border-bottom: 1px solid var(--line-soft); }
.tk-head-room { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-8) var(--space-16); }
.tk-latin, .tk-muted { color: var(--ink-muted); }
.tk-link-btn { padding: var(--space-4); border: 0; background: none; color: var(--ink-muted); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.tk-link-btn:hover { color: var(--ink); }
.tk a { color: var(--ink); }

/* 全体: 左に焚火とチャット、右に音楽 */
.tk-main {
  /* 基準の高さは下の height。flex: 1（基準 0）にすると右の欄の中身の高さで全体が伸び、焚火の枠まで縦に伸びる */
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  grid-template-rows: minmax(420px, 1fr) 240px;
  grid-template-areas: "scene side" "chat side";
  height: calc(100svh - 77px);
  min-height: 680px;
}

/* ---------- 焚火の場 ---------- */
.tk-scene {
  grid-area: scene;
  position: relative;
  overflow: hidden;
  /* 地面側の暗がり。空（色・星）は sky.js が #sky に日本時間に合わせて描く */
  background: radial-gradient(120% 70% at 50% 100%, var(--surface) 0%, var(--stage) 70%);
}
.tk-sky, .tk-fire { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.tk-seats { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.tk-seat { position: absolute; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); transform: translate(-50%, -78%); transition: left .6s, top .6s; }
/* 人影: 頭と肩。火がつくと、火に面した色になる */
.tk-seat-figure { position: relative; width: 30px; height: 26px; border-radius: 15px 15px 6px 6px; background: var(--surface); border: 1px solid var(--line-soft); transition: background-color 2s, border-color 2s; }
.tk-seat-figure::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 16px; height: 16px; margin: 0 0 2px -8px; border-radius: 50%; background: inherit; border: inherit; }
.is-lit .tk-seat-figure { background: color-mix(in srgb, var(--accent) 35%, var(--stage)); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.tk-seat-name { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 var(--space-8); border-radius: var(--radius-pill); background: var(--scrim-strong); color: var(--ink-body); }
.tk-seat.is-me .tk-seat-name { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
/* いま流れている曲を持ち寄った人: 頭の上に ♪ の吹き出し（人影の頭は座席の箱の上に 18px はみ出している） */
.tk-seat-note { position: absolute; left: 50%; bottom: calc(100% + 24px); padding: 0 var(--space-8); border-radius: var(--radius-pill); background: var(--ink); color: var(--stage); font-size: 15px; line-height: 22px; font-weight: 700; transform: translateX(-50%); animation: tk-note 2.4s ease-in-out infinite; }
.tk-seat-note::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -4px; border: 4px solid transparent; border-top-color: var(--ink); }
.tk-seat.is-playing .tk-seat-figure { border-color: var(--line-active); }
@keyframes tk-note { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -4px); } }
@media (prefers-reduced-motion: reduce) { .tk-seat-note { animation: none; } }

.tk-fire-status { position: absolute; left: var(--ng-gutter); right: var(--ng-gutter); bottom: var(--space-16); margin: 0; text-align: center; color: var(--ink-body); }

/* 入口 */
.tk-entry { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; overflow-y: auto; padding: var(--space-20); background: var(--scrim); }
.tk-entry[hidden] { display: none; }
.tk-entry-panel { width: min(100%, 420px); display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-28); border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--scrim-edge); box-shadow: var(--shadow-panel); }
.tk-entry-title { margin: 0; }
.tk-entry-lead { margin: 0; color: var(--ink-body); word-break: auto-phrase; }
.tk-entry-panel p { margin: 0; }
.tk-label { color: var(--ink-muted); letter-spacing: 0.14em; }
.tk-error:empty { display: none; }
.tk-error { padding-left: var(--space-12); border-left: 2px solid var(--accent); color: var(--ink); }
.tk-room-pick { display: flex; flex-direction: column; gap: var(--space-8); margin-top: var(--space-8); padding-top: var(--space-16); border-top: 1px solid var(--line-soft); }
.tk-room-now { color: var(--ink); }
.tk-room-now:empty { display: none; }
.tk-room-row { display: flex; gap: var(--space-8); }
/* ヘッダーの「合言葉を変える」 */
.tk-room-form { display: flex; gap: var(--space-8); flex-basis: 100%; }
.tk-room-form[hidden] { display: none; }
.tk-room-form .tk-input { max-width: 280px; }

/* 薪をくべるボタン（炎の上に透明で重ねる）と、くべた人の名前 */
.tk-stoke { position: absolute; left: 50%; top: 66%; z-index: 2; width: clamp(140px, 26%, 300px); height: clamp(140px, 42%, 320px); transform: translate(-50%, -78%); padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tk-stoke:focus-visible { outline-offset: -4px; }
.tk-stoke-note { position: absolute; left: 50%; top: 14%; z-index: 2; margin: 0; padding: var(--space-4) var(--space-12); transform: translateX(-50%); border-radius: var(--radius-pill); background: var(--scrim-strong); color: var(--ink); white-space: nowrap; opacity: 0; transition: opacity .3s; pointer-events: none; }
.tk-stoke-note.is-show { opacity: 1; }

.tk-input { flex: 1; min-width: 0; min-height: 48px; box-sizing: border-box; padding: 0 var(--space-16); border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: var(--stage); color: var(--ink); font: 400 15px/1.4 var(--font-sans); }
.tk-input::placeholder { color: var(--ink-muted); }
.tk-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.tk-input:disabled { opacity: .5; }
.tk .ng-btn { min-height: 48px; padding-inline: var(--space-20); font-family: var(--font-sans); }
.tk .ng-btn:disabled { opacity: .45; cursor: default; }

/* ---------- 音楽 ---------- */
.tk-side { grid-area: side; display: flex; flex-direction: column; gap: var(--space-24); min-height: 0; overflow-y: auto; padding: var(--space-24); border-left: 1px solid var(--line-soft); background: var(--surface); }
.tk-now, .tk-add, .tk-queue { display: flex; flex-direction: column; gap: var(--space-8); }
.tk-add p, .tk-now p { margin: 0; }
.tk-now-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-12); }
.tk-now-title { font: 700 17px/1.5 var(--font-mincho); letter-spacing: 0.04em; overflow-wrap: anywhere; }
.tk-now-title a { text-decoration: none; }
.tk-now-title a:hover { text-decoration: underline; }
.tk-deck:not(:has(.tk-player:not([hidden]))) { display: none; }
.tk-deck { overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--radius-m); background: var(--stage); }
.tk-player-youtube { aspect-ratio: 16 / 9; }
.tk-player-soundcloud { height: 166px; }
.tk-player-suno { height: 280px; } /* これより低いと、埋め込みの曲の絵が上で欠ける */
.tk-player-audio { padding: var(--space-8); }
.tk-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.tk-player audio { display: block; width: 100%; }
.tk-unblock { align-self: flex-start; }
.tk-unblock[hidden] { display: none; }
.tk-controls { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-12) var(--space-20); }
.tk-volume { display: flex; align-items: center; gap: var(--space-8); color: var(--ink-muted); }
.tk-volume input { width: 140px; accent-color: var(--accent); }
.tk-add-row { display: flex; gap: var(--space-8); }
.tk-add .tk-muted:empty { display: none; }

.tk-queue-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-soft); }
.tk-queue-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--space-12); padding: var(--space-12) 0; border-bottom: 1px solid var(--line-soft); }
.tk-queue-title { grid-column: 1; overflow-wrap: anywhere; }
.tk-queue-title a { text-decoration: none; }
.tk-queue-title a:hover { text-decoration: underline; }
.tk-queue-item > .caption { grid-column: 1; }
.tk-queue-item > .tk-link-btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.tk-queue-empty { padding: var(--space-12) 0; }
.tk-queue[hidden] { display: none; }

/* YouTube で探す */
.tk-search { display: flex; flex-direction: column; gap: var(--space-8); }
.tk-search p { margin: 0; }
.tk-search .tk-muted:empty { display: none; }
.tk-consent { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12); padding: var(--space-16); border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--stage); }
.tk-consent[hidden] { display: none; }
#searchFallback { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-12); }
#searchFallback[hidden] { display: none; }
.tk-yt { align-self: flex-start; display: block; line-height: 0; }
.tk-yt img { display: block; width: 217px; height: 186px; } /* 縮めない（赤い部分の高さ 100px 以上の決まり） */
.tk-result { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: var(--space-12); padding: var(--space-8) 0; border-bottom: 1px solid var(--line-soft); }
.tk-result img { display: block; width: 96px; height: 54px; object-fit: cover; border-radius: var(--radius-s); background: var(--stage); }
.tk-result-text { display: flex; flex-direction: column; min-width: 0; }
.tk-result-text a { text-decoration: none; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tk-result-text a:hover { text-decoration: underline; }
.tk-result-text .caption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- ひとこと ---------- */
.tk-chat { grid-area: chat; display: flex; flex-direction: column; gap: var(--space-8); min-height: 0; padding: var(--space-12) var(--ng-gutter) var(--space-16); border-top: 1px solid var(--line-soft); }
.tk-chat-log { flex: 1; min-height: 0; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.tk-chat-item { display: flex; align-items: baseline; gap: var(--space-8); padding: 2px 0; color: var(--ink-body); overflow-wrap: anywhere; }
.tk-chat-item time { flex: none; }
.tk-chat-item b { flex: none; color: var(--ink); font-weight: 700; }
.tk-chat-item.is-sys { color: var(--ink-muted); }
.tk-chat-form { display: flex; gap: var(--space-8); }
.tk-chime { flex: none; min-height: 48px; padding: 0 var(--space-12); border: 1px solid var(--line); border-radius: var(--radius-pill); background: none; color: var(--ink-muted); cursor: pointer; }
.tk-chime[aria-pressed="true"] { border-color: var(--line-strong); color: var(--ink); }

.tk-conn { position: fixed; left: 50%; bottom: var(--space-16); z-index: 5; transform: translateX(-50%); margin: 0; padding: var(--space-8) var(--space-16); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--scrim-edge); }
.tk-conn[hidden] { display: none; }

/* ---------- 狭い画面: 焚火 → 音楽 → ひとこと の順に縦に積む ---------- */
@media (max-width: 960px) {
  .tk-main { display: flex; flex-direction: column; height: auto; min-height: 0; }
  .tk-scene { height: max(380px, 58svh); flex: none; }
  /* 入口が出ている間は、パネルの高さまで焚火の枠を伸ばす（はみ出して下の音楽欄に重ならないように） */
  .tk-scene:has(> .tk-entry:not([hidden])) { height: auto; min-height: max(380px, 58svh); }
  .tk-entry { position: relative; min-height: inherit; }
  .tk-side { overflow: visible; border-left: 0; border-top: 1px solid var(--line-soft); padding-inline: var(--ng-gutter); }
  .tk-chat { height: 380px; flex: none; }
}
@media (max-width: 600px) {
  .tk-head .wordmark-latin { display: none; }
  .tk-entry-panel { padding: var(--space-20); }
  .tk-add-row, .tk-room-row { flex-wrap: wrap; }
  .tk-add-row .ng-btn, .tk-room-row .ng-btn { flex: 1; justify-content: center; }
  .tk-chat-form { flex-wrap: wrap; }
  .tk-chat-form .tk-input { flex-basis: 100%; }
  .tk-seat-name { max-width: 6.5em; }
}