/* 器ページ (/play/<slug>/) の共通の見た目。上にログイン表示、残りを全部ゲームに使う。
 * ページ全体の地は <html class="play-doc"> の器ページだけ (この CSS はサイトのゲームの記事も読むので、素の html・body には付けない) */
html.play-doc, html.play-doc body { margin: 0; height: 100%; background: #0b0e12; }
.play { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.play > .stage { flex: 1; min-height: 0; }
.play > .stage iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- ゲームとパネルを並べる部品 .ply (2026-10-18 作者指示。見本は docs/見本-チャットパネル/) ----------
 * 置き方は2つ。どちらも動きは /play/play.js:
 *   .ply--embed サイトのゲームの記事。ヘッダーの下に本文の枠いっぱいで置く。上の帯は無い
 *   .ply--page  器ページ (/play/<slug>/)。画面いっぱい。上に「← 記事」とログイン表示の細い帯 (.ply-top) だけ
 * PC (横 900px 以上): 左にゲーム6・右にパネル4。パネルは1枚の iframe (/hub/chat/?game=<slug>) で、タブ4つと ⛶・» はパネルの中にある。
 *   閉じるとゲームが全幅になり、右端の取っ手で開き直す。
 * スマホ (1列): 枠のいちばん上にタブ (🎮 ゲーム / 💬 チャット / 🏆 ランキング / 📖 情報 / 🔧 要望)。ゲームを押すとゲーム、
 *   ほかはパネルが枠いっぱいに出る。ゲームは隠すだけで読み直さない・大きさも変えない (戻ると続きから)。最初はゲーム */
.ply {
  --ply-bg: #05060f; --ply-panel: #0a0d1a; --ply-line: #1d2740; --ply-ink: #dfe7ff; --ply-dim: #8d9bc2; --ply-acc: #1ee3ff; --ply-new: #36d399;
  display: flex; flex-direction: column; min-width: 0;
  background: var(--ply-bg); color: var(--ply-ink);
  font: 14px/1.4 system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
}
.ply--page { height: 100vh; height: 100dvh; }
/* 記事の中: 1画面に収まる高さ。ページ側がヘッダーの高さを引いて決める (PC は全体 --ply-embed-h、スマホはタブの下 --ply-m-main-h) */
.ply--embed { height: var(--ply-embed-h, 640px); border-radius: 12px; overflow: hidden; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); }
.ply:fullscreen { height: 100vh; border-radius: 0; }

/* 器ページの細い帯 (← 記事・題・ログイン表示) */
.ply-top {
  flex: 0 0 40px; display: flex; align-items: center; gap: 8px; padding: 0 10px;
  border-bottom: 1px solid var(--ply-line); background: #080b16; min-width: 0;
}
.ply-back { flex-shrink: 0; color: var(--ply-dim); text-decoration: none; padding: 6px 8px; border-radius: 8px; white-space: nowrap; }
.ply-back:hover { color: var(--ply-ink); background: rgba(255, 255, 255, .06); }
.ply-title {
  margin: 0; font-size: 15px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; color: #eaf6ff; text-shadow: 0 0 10px rgba(30, 227, 255, .35);
}
.ply-sp { flex: 1; }
.ply-top .hubbar { --hub-bg: transparent; height: auto; padding: 0; min-width: 0; flex-shrink: 1; }

/* スマホのタブ (PC では出さない) */
.ply-mtabs { display: none; }
.ply-new {
  display: inline-block; vertical-align: 1px; margin-left: 3px; padding: 0 4px; border-radius: 999px; background: rgba(54, 211, 153, .16);
  color: var(--ply-new); border: 1px solid rgba(54, 211, 153, .5); font-size: 10px; font-weight: 700; line-height: 15px; writing-mode: horizontal-tb;
}
.ply-new[hidden] { display: none; }

.ply-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr; position: relative; }
.ply-stage { min-width: 0; min-height: 0; background: #000; }
.ply-stage iframe { display: block; width: 100%; height: 100%; border: 0; }
.ply-panel { display: none; min-width: 0; min-height: 0; background: var(--ply-panel); border-left: 1px solid var(--ply-line); }
.ply.is-open .ply-panel { display: block; }
.ply-panel iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--ply-panel); }

/* 閉じたパネルを開き直す取っ手 (PC だけ。右の端に縦に出る) */
.ply-handle {
  display: none; position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 2;
  font: inherit; font-weight: 700; color: var(--ply-ink); background: var(--ply-panel); border: 1px solid var(--ply-line); border-right: 0;
  border-radius: 10px 0 0 10px; padding: 12px 6px; cursor: pointer; writing-mode: vertical-rl; letter-spacing: .1em;
}
.ply-handle:hover { color: var(--ply-acc); border-color: var(--ply-acc); }

@media (min-width: 900px) {
  .ply.is-open .ply-main { grid-template-columns: 6fr 4fr; }
  .ply:not(.is-open) .ply-handle { display: block; }
}
@media (max-width: 899.98px) {
  .ply-mtabs {
    display: flex; flex: 0 0 44px; background: #080b16; border-bottom: 1px solid var(--ply-line); overflow-x: auto; scrollbar-width: none;
  }
  .ply-mtabs::-webkit-scrollbar { display: none; }
  .ply-mtabs button {
    flex: 1 1 auto; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--ply-dim);
    font: 700 12.5px/1 system-ui, -apple-system, "Hiragino Sans", sans-serif; padding: 0 4px; white-space: nowrap; cursor: pointer;
  }
  .ply-mtabs button[aria-selected="true"] { color: var(--ply-acc); border-bottom-color: var(--ply-acc); }
  /* ゲームとパネルを同じ所に重ね、選んでいない方を見えなくする (ゲームは読み直さない) */
  .ply-main { display: block; position: relative; flex: 1 1 auto; }
  .ply--embed:not(:fullscreen) { height: auto; border-radius: 0; box-shadow: none; }
  .ply--embed:not(:fullscreen) .ply-main { flex: none; height: var(--ply-m-main-h, calc(100vh - 100px)); }
  .ply-stage, .ply .ply-panel { display: block; position: absolute; inset: 0; border: 0; }
  .ply[data-mt="game"] .ply-panel, .ply:not([data-mt="game"]) .ply-stage { visibility: hidden; pointer-events: none; }
  .ply-handle { display: none !important; }
}
@media (max-width: 599.98px) {
  .ply .ply-top .hubbar { display: none; }
}