/* ZQ Party — 評価ランキング（v1.0.0・Ryu指示 2026-08-16）
   ★足すだけ。一覧の見た目は変えない。 */

#zqr-btn{
  position:fixed; right:16px; top:14px; z-index:120;
  padding:9px 16px; border-radius:11px; cursor:pointer;
  font-size:13px; font-weight:800; font-family:inherit;
  color:#241a05; background:linear-gradient(180deg,#ffd27a,#f0a020);
  border:0; box-shadow:0 4px 14px rgba(0,0,0,.35);
}
#zqr-btn:hover{ filter:brightness(1.06); }

#zqr-ov{
  position:fixed; inset:0; z-index:200; display:none;
  background:rgba(6,10,22,.78);
  align-items:flex-start; justify-content:center;
  padding:24px 14px; overflow-y:auto;
}
#zqr-ov.open{ display:flex; }

#zqr-ov .zqr-panel{
  width:min(760px, 100%);
  background:#0d1426; color:#e9f0ff;
  border:1px solid rgba(160,190,255,.28); border-radius:16px;
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  overflow:hidden;
}
#zqr-ov .zqr-h{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 16px; background:linear-gradient(180deg,#1b2a4a,#141f38);
  border-bottom:1px solid rgba(160,190,255,.22);
  position:sticky; top:0; z-index:2;            /* ★スクロールしても閉じられる */
}
#zqr-ov .zqr-h b{ font-size:16px; letter-spacing:.04em; }
#zqr-ov .zqr-x{
  width:34px; height:34px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.08); color:#e9f0ff;
  border:1px solid rgba(255,255,255,.24); font-size:17px; line-height:1;
}
#zqr-ov .zqr-b{ padding:14px 16px 18px; }

#zqr-ov .zqr-note{
  margin:6px 2px; font-size:12.5px; color:#9fb2d4;
}

#zqr-ov .zqr-row{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px; margin-bottom:10px; border-radius:13px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(160,190,255,.2);
}
#zqr-ov .zqr-p1{ background:rgba(255,210,74,.12); border-color:rgba(255,210,74,.5); }
#zqr-ov .zqr-p2{ background:rgba(200,214,235,.10); border-color:rgba(200,214,235,.42); }
#zqr-ov .zqr-p3{ background:rgba(212,150,90,.10); border-color:rgba(212,150,90,.42); }

#zqr-ov .zqr-rank{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:900; color:#0d1426;
  background:linear-gradient(180deg,#dbe7ff,#a9bede);
}
#zqr-ov .zqr-p1 .zqr-rank{ background:linear-gradient(180deg,#ffe9a6,#f0b429); }
#zqr-ov .zqr-p2 .zqr-rank{ background:linear-gradient(180deg,#f2f6ff,#c3cfe2); }
#zqr-ov .zqr-p3 .zqr-rank{ background:linear-gradient(180deg,#f0cfae,#cf9257); }

#zqr-ov .zqr-main{ flex:1 1 auto; min-width:0; }
#zqr-ov .zqr-team{ font-size:15px; font-weight:900; }
#zqr-ov .zqr-biz{
  margin-left:8px; font-size:12px; font-weight:700; color:#8fd0ff;
}
#zqr-ov .zqr-mem{ margin-top:2px; font-size:11px; color:#93a6c6; }

#zqr-ov .zqr-axes{ margin-top:8px; display:flex; flex-direction:column; gap:4px; }
#zqr-ov .zqr-ax{ display:flex; align-items:center; gap:8px; font-size:11.5px; }
#zqr-ov .zqr-ax > span{ flex:0 0 132px; color:#b9c8e4; }
#zqr-ov .zqr-bar{
  flex:1 1 auto; display:block; height:7px; border-radius:99px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
  overflow:hidden;
}
#zqr-ov .zqr-bar i{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,#7fd3ff,#4a86ff);
}
#zqr-ov .zqr-ax > em{
  flex:0 0 26px; text-align:right; font-style:normal; font-weight:800; color:#e9f0ff;
}
#zqr-ov .zqr-good{
  margin-top:7px; font-size:11.5px; color:#ffd98a;
}

#zqr-ov .zqr-total{
  flex:0 0 auto; text-align:center; min-width:62px;
  padding:6px 8px; border-radius:11px;
  background:rgba(255,255,255,.07); border:1px solid rgba(160,190,255,.28);
}
#zqr-ov .zqr-total span{ display:block; font-size:10px; color:#9fb2d4; }
#zqr-ov .zqr-total b{ display:block; font-size:24px; font-weight:900; color:#ffd24a; line-height:1.1; }
#zqr-ov .zqr-total i{ font-style:normal; font-size:10px; color:#9fb2d4; }

#zqr-ov .zqr-more{
  display:block; margin:10px auto 0; padding:8px 16px; cursor:pointer;
  font-size:12.5px; font-weight:800; font-family:inherit; border-radius:9px;
  color:#241a05; background:linear-gradient(180deg,#ffd27a,#f0a020); border:0;
}

@media (max-width:640px){
  #zqr-ov .zqr-row{ flex-wrap:wrap; }
  #zqr-ov .zqr-total{ margin-left:50px; }
  #zqr-ov .zqr-ax > span{ flex-basis:96px; }
}

/* =========================================================================
 * ★M-1の採点表ふう（v1.0.11・Ryu指示 2026-08-19）
 *   棒グラフをやめ、数字の表にした。ねらいは「1画面に全チームが収まる」こと。
 *   ★上の .zqr-row 一式（棒グラフ）はもう使っていない。
 *     発表モードが同じ画面を使うため、消さずに残してある。
 * ======================================================================= */
#zqr-ov .zqr-panel{ width:min(920px, 100%); }      /* 表のぶんだけ広げる */

#zqr-ov .zqt{
  width:100%; border-collapse:separate; border-spacing:0 4px;
  font-variant-numeric:tabular-nums;                /* 数字の幅をそろえる */
}
#zqr-ov .zqt thead th{
  padding:2px 6px 7px; font-size:11px; font-weight:700;
  color:#8fa2c4; text-align:center; white-space:nowrap;
  border-bottom:1px solid rgba(160,190,255,.22);
}
#zqr-ov .zqt thead th.zqt-tm{ text-align:left; padding-left:10px; }
#zqr-ov .zqt thead th.zqt-ax{ cursor:help; }

#zqr-ov .zqt td{
  padding:7px 6px; background:rgba(255,255,255,.05);
  border-top:1px solid rgba(160,190,255,.16);
  border-bottom:1px solid rgba(160,190,255,.16);
}
#zqr-ov .zqt td:first-child{
  border-left:1px solid rgba(160,190,255,.16);
  border-radius:10px 0 0 10px;
}
#zqr-ov .zqt td:last-child{
  border-right:1px solid rgba(160,190,255,.16);
  border-radius:0 10px 10px 0;
}

#zqr-ov .zqt .zqt-no{
  width:34px; text-align:center;
  font-size:17px; font-weight:900; color:#a9bede;
}
#zqr-ov .zqt .zqt-tm{ text-align:left; padding-left:10px; }
#zqr-ov .zqt .zqt-tm b{ font-size:14px; font-weight:900; }
#zqr-ov .zqt .zqt-tm span{
  margin-left:7px; font-size:11.5px; font-weight:700; color:#8fd0ff;
}
#zqr-ov .zqt .zqt-ax{
  width:60px; text-align:center;   /* ★「実現性」「可能性」で3文字になったぶん */
  font-size:16px; font-weight:800; color:#dbe7ff;
}
#zqr-ov .zqt .zqt-max{ color:#7fe6a8; }            /* 満点 */
#zqr-ov .zqt .zqt-zero{ color:#6f819f; }           /* 0点 */
#zqr-ov .zqt .zqt-tt{
  width:66px; text-align:center;
  font-size:23px; font-weight:900; color:#ffd24a; line-height:1.05;
}

/* 上位3チームだけ、色を付ける */
#zqr-ov .zqt-p1 td{
  background:rgba(255,210,74,.13);
  border-color:rgba(255,210,74,.5);
}
#zqr-ov .zqt-p1 .zqt-no{ color:#ffd24a; font-size:20px; }
#zqr-ov .zqt-p2 td{ background:rgba(200,214,235,.10); border-color:rgba(200,214,235,.42); }
#zqr-ov .zqt-p2 .zqt-no{ color:#e6eeff; }
#zqr-ov .zqt-p3 td{ background:rgba(212,150,90,.10); border-color:rgba(212,150,90,.42); }
#zqr-ov .zqt-p3 .zqt-no{ color:#f0cfae; }

/* せまい画面：項目名を縦に、数字を小さく */
@media (max-width:700px){
  #zqr-ov .zqt thead th{ font-size:10px; }
  #zqr-ov .zqt .zqt-ax{ width:38px; font-size:13.5px; }
  #zqr-ov .zqt .zqt-tt{ width:52px; font-size:19px; }
  #zqr-ov .zqt .zqt-tm b{ font-size:12.5px; }
  #zqr-ov .zqt .zqt-tm span{ display:block; margin-left:0; }
  #zqr-ov .zqt td{ padding:6px 3px; }
}

/* =========================================================================
 * ★発表モード（v1.0.12・Ryu指示 2026-08-19）
 *   採点表に、行が下から1つずつ差し込まれていく。
 *   ★<tr> には transform が効かない環境があるため、動かすのは **中のセル**。
 *     td を動かせば、行そのものを動かしたように見える。
 * ======================================================================= */
#zqs-btn{
  position:fixed; right:130px; top:14px; z-index:120;
  padding:9px 16px; border-radius:11px; cursor:pointer;
  font-size:13px; font-weight:800; font-family:inherit;
  color:#fff; background:linear-gradient(180deg,#e0473a,#b9291d);
  border:0; box-shadow:0 4px 14px rgba(0,0,0,.35);
}
#zqs-btn:hover{ filter:brightness(1.08); }

#zqr-ov .zqs-stage{ padding:6px 2px 10px; }
#zqr-ov .zqs-ttl{
  text-align:center; font-size:15px; font-weight:900; letter-spacing:.28em;
  color:#9fb2d4; margin:2px 0 12px;
}
#zqr-ov .zqs-hint{ text-align:center; margin-top:14px; font-size:11px; color:#6f819f; }

/* 発表のときだけ、表を少し大きく見せる */
#zqr-ov .zqs-t .zqt-tm b{ font-size:16px; }
#zqr-ov .zqs-t .zqt-ax{ font-size:17px; }
#zqr-ov .zqs-t .zqt-tt{ font-size:26px; }
#zqr-ov .zqs-t td{ padding:9px 6px; }

/* 差し込まれる動き。td を動かす */
#zqr-ov .zqs-tr td{
  opacity:0; transform:translateY(22px);
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.9,.3,1.15);
}
#zqr-ov .zqs-tr.zqs-in td{ opacity:1; transform:none; }

/* 1位はひときわ大きく */
#zqr-ov .zqs-t .zqt-p1 .zqt-no{ font-size:24px; }
#zqr-ov .zqs-t .zqt-p1 .zqt-tm b{ font-size:20px; }
#zqr-ov .zqs-t .zqt-p1 .zqt-tt{ font-size:34px; }
#zqr-ov .zqs-t .zqt-p1 td{ box-shadow:0 0 26px rgba(255,210,74,.22) inset; }

@media (max-width:700px){
  #zqs-btn{ right:118px; padding:8px 12px; font-size:12px; }
  #zqr-ov .zqs-t .zqt-tm b{ font-size:13px; }
  #zqr-ov .zqs-t .zqt-ax{ font-size:14px; }
  #zqr-ov .zqs-t .zqt-tt{ font-size:20px; }
  #zqr-ov .zqs-t .zqt-p1 .zqt-tt{ font-size:26px; }
}

/* 動きを減らす設定の人には、出るだけ */
@media (prefers-reduced-motion:reduce){
  #zqr-ov .zqs-tr td{ transition:opacity .2s; transform:none; }
}

/* ★個別の発表画面では、この2つを隠す（v1.0.14・Ryu指示 2026-08-19）。
   投影しているのは発表の中身なので、運営用の入口は出さない。
   印（body.zqg-oneView）は zq-gallery.js が付け外しする。 */
body.zqg-oneView #zqr-btn,
body.zqg-oneView #zqs-btn{ display:none !important; }