/* レイアウト編集（public/layout.js）。パソコン（幅900px以上）で、自分の配置を使うときだけ効く */
.layout-open, .layout-bar, .layout-frame { display: none; }
@media (min-width: 900px) {
  .layout-open { display: inline-flex; padding: 6px 12px; font-size: 12px; border-radius: 99px; }
  .layout-bar:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; position: fixed; top: 10px; right: 12px; z-index: 50;
    max-width: min(760px, calc(100vw - 24px)); padding: 10px 14px; border-radius: 16px; font-size: 13px;
    background: rgba(14, 12, 34, .96); border: 1px solid var(--line-strong); box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
  .layout-bar b { color: var(--accent); }
  .layout-bar label { display: inline-flex; align-items: center; gap: 6px; }
  .layout-bar input[type=checkbox] { width: auto; margin: 0; accent-color: var(--accent2); }
  .layout-bar select { width: auto; margin: 0; padding: 5px 8px; font-size: 13px; }
  .layout-bar .btn-sub { padding: 6px 12px; font-size: 13px; border-radius: 99px; }

  /* キャンバス：選んだ大きさの箱を、実際の画面に合わせて拡大・縮小する（layout.js が width/height/transform を入れる） */
  body.layout-on main:has(#room:not([hidden])) { max-width: none; }
  body.layout-on #room:not([hidden]) { display: block; position: relative; flex: none; transform-origin: 0 0; }
  /* room-main はキャンバス全体を覆うので、それ自体はクリック・スクロールを受けない（下のプレイヤー一覧・手札に届くように）。中の部品だけ受ける */
  body.layout-on .room-main { position: absolute; inset: 0; display: block; overflow: visible; max-height: none; pointer-events: none; }
  body.layout-on .room-main > * { pointer-events: auto; }
  body.layout-on .room-side, body.layout-on .room-main > .stage, body.layout-on #quiz, body.layout-on #result, body.layout-on #results {
    position: absolute; margin: 0; overflow: auto; box-sizing: border-box; }
  body.layout-on #result { backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; }
  body.layout-on .room-side { max-height: none; }
  body.layout-on #results { display: block; padding: 10px 12px; border-radius: 18px; background: rgba(8, 8, 20, .55); border: 1px solid rgba(255, 255, 255, .1); }
  body.layout-on:not(.revealing) #results { display: none; }
  body.layout-on #results tbody { display: table; width: 100%; border-collapse: collapse; }
  /* 「今のウインドウ」：選択肢を真ん中の枠いっぱいに広げる（枠が大きくなれば選択肢も大きく） */
  body.layout-win #quiz:not([hidden]) { display: flex; flex-direction: column; }
  body.layout-win #quiz .choices:not([hidden]) { flex: 1 1 auto; min-height: 0; grid-auto-rows: 1fr; align-content: stretch; }
  body.layout-win #quiz .choices:empty { display: none; }
  body.layout-win #quiz .choice { font-size: 18px; }
  body.layout-win #quiz .choice small { font-size: 13px; }
  /* 編集中は待機中・最終結果の画面を隠して、枠だけを見せる */
  body.layout-editing #lobby, body.layout-editing #over { display: none !important; }
  body.layout-editing .layout-frame { display: grid; place-items: center; position: absolute; z-index: 20; box-sizing: border-box; cursor: move;
    border: 2px dashed var(--accent); border-radius: 14px; background: rgba(127, 232, 255, .08); touch-action: none; user-select: none; }
  body.layout-editing .layout-frame span { padding: 4px 12px; border-radius: 99px; font-weight: 800; font-size: 15px; background: rgba(14, 12, 34, .9); color: #fff; }
  .layout-resize { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; cursor: nwse-resize; border-radius: 6px 0 12px 0;
    background: var(--accent); box-shadow: 0 0 10px rgba(127, 232, 255, .7); }
}
@media (min-width: 900px) {
  /* 場面の切り替え（出題中／答え合わせ）：編集中だけ */
  .ly-phase:not([hidden]) { display: inline-flex; gap: 2px; padding: 2px; border-radius: 99px; background: rgba(0, 0, 0, .35); }
  .ly-phase button { padding: 5px 12px; border: none; border-radius: 99px; background: none; color: var(--sub); font-weight: 700; font-size: 13px; cursor: pointer; }
  .ly-phase button.on { background: var(--glass-strong); color: #fff; box-shadow: 0 0 0 1px var(--accent) inset; }
  .ly-phase button:disabled { cursor: default; opacity: .6; }
  /* トップ画面から開いたとき（部屋を作る前の見本）：待機中の画面は出さない */
  body.ly-preview #lobby { display: none !important; }
  .list-head .layout-open { margin-left: 6px; }
}
body.ly-sample .video-bg { visibility: hidden; }