/* ZQ 画面の共有 v0.2.0 — 入力役の帯と、見る人の見え方 */

.zql-bar{position:fixed;right:12px;top:12px;z-index:150;display:flex;align-items:center;gap:9px;
  background:#fff;border:1.5px solid #e4eaf3;border-left:4px solid #94a3b8;border-radius:999px;
  padding:7px 14px 7px 12px;box-shadow:0 4px 16px rgba(20,40,80,.18);
  font-family:-apple-system,BlinkMacSystemFont,'Hiragino Sans','Noto Sans JP',sans-serif}
.zql-bar.zql-mine{border-left-color:#2563eb}
/* 入力役がいない（＝いまは誰でも書ける）／共有が続けられない（0.9.3） */
.zql-bar.zql-none{border-left-color:#f0a020}
.zql-bar.zql-none .zql-dot{background:#f0a020}
.zql-bar.zql-dead{border-left-color:#c0392b;background:#fff7f6}
.zql-bar.zql-dead .zql-dot{background:#c0392b}
.zql-bar.zql-dead .zql-take{border-color:#c0392b;color:#c0392b}
.zql-bar.zql-dead .zql-take:hover{background:#c0392b;color:#fff}

.zql-dot{width:9px;height:9px;border-radius:50%;background:#94a3b8;flex:0 0 auto}
.zql-bar.zql-mine .zql-dot{background:#2563eb;animation:zqlPulse 1.8s ease-in-out infinite}
@keyframes zqlPulse{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.5)}
  70%{box-shadow:0 0 0 7px rgba(37,99,235,0)}}

.zql-who{font-size:12.5px;font-weight:900;color:#1b2637;white-space:nowrap}
.zql-take{border:1.5px solid #2563eb;background:#fff;color:#2563eb;border-radius:999px;
  padding:5px 13px;font-size:12px;font-weight:900;cursor:pointer;font-family:inherit;white-space:nowrap}
.zql-take:hover{background:#2563eb;color:#fff}

/* ================= 見る人（ペンでない人）の画面 ================= */
/* 触れないようにする。押せないボタンは薄く。 */
.zql-watch #board .cell,
.zql-watch #kingCols,
.zql-watch #connBtn,
.zql-watch #submitBtn,
.zql-watch #applyBtn,
.zql-watch .mira-in,
.zql-watch #miraSend,
.zql-watch #bizName,
.zql-watch #bizIdea,
/* ★ミラボにお願いする口は、ぜんぶペンを持つ人だけ（0.9.2）。
   ここを開けておくと、1チームの中で何人もがAIを同時に呼べてしまう。
   12チーム×人数ぶんが一斉に来ると、サーバの受け口が埋まって
   サイト全体が返らなくなる（8/11に実際に起きた）。 */
.zql-watch #connModal .cm-b,
.zql-watch #connAdd,
.zql-watch .zqm-choices,
.zql-watch .zqm-plans,
.zql-watch .zqm-place,
.zql-watch .zqs-force,
.zql-watch #zqc-precheck{pointer-events:none!important}

.zql-watch #board .cell,
.zql-watch #kingCols{opacity:.92}
.zql-watch #connBtn,
.zql-watch #submitBtn,
.zql-watch #applyBtn,
.zql-watch #miraSend{opacity:.4!important}
.zql-watch textarea,
.zql-watch input[type="text"]{background:rgba(255,255,255,.04)!important;cursor:default}

/* 見ているあいだの合図（画面の縁） */
.zql-watch::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:140;
  box-shadow:inset 0 0 0 3px rgba(148,163,184,.55)}

@media(max-width:860px){
  .zql-bar{right:8px;top:8px;padding:6px 11px 6px 10px;gap:7px}
  .zql-who{font-size:11.5px}
  .zql-take{padding:4px 10px;font-size:11px}
}