/* ui.css — แถบเลือกท่า แถบรายงานผล แผงข้อมูล และ log
   ทุกอย่างใต้ภาพถ่ายทอดใช้รูปทรงเฉียงเดียวกัน ให้รู้สึกเป็นชุดกราฟิกเดียวกัน */

/* ---------- แถบเลือกท่า: แท็บเฉียงติดใต้ภาพ ---------- */
/* เว้นจากขอบล่างของภาพ ไม่ให้ดูเหมือนติดกันเป็นชิ้นเดียว
   และกันความสูงไว้ ไม่ให้ทั้งหน้าเด้งขึ้นลงทุกครั้งที่ปุ่มหายไประหว่างเฉลยผล */
.controls{display:flex;gap:3px;padding:0 20px;margin-top:16px;min-height:76px;}

.btn{
  flex:1;position:relative;border:0;cursor:pointer;color:var(--chalk);text-align:left;
  background:linear-gradient(180deg,var(--deck-2),var(--deck));
  border-top:3px solid var(--edge);
  padding:15px 18px 17px;
  font-family:inherit;
  transition:background .16s,border-color .16s,transform .16s;
}
.btn:hover,.btn:focus-visible{
  background:linear-gradient(180deg,#1B2836,#101821);
  transform:translateY(-3px);
}
.btn:focus-visible{outline:2px solid var(--you);outline-offset:2px;}
.btn.atk:hover,.btn.atk:focus-visible{border-top-color:var(--you);}
.btn.def:hover,.btn.def:focus-visible{border-top-color:var(--rival);}
.btn.rps:hover,.btn.rps:focus-visible{border-top-color:var(--chalk);}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none;}
/* ชื่อท่า */
.btn{font-size:19px;font-weight:600;line-height:1.2;}
/* บรรทัดอธิบายใต้ชื่อท่า */
.btn small{
  display:block;margin-top:5px;font-size:11px;font-weight:400;
  color:var(--steel);font-family:'IBM Plex Mono',monospace;letter-spacing:.2px;line-height:1.45;
}
.btn small.good{color:var(--live);}
.btn small.bad{color:var(--rival);}

/* หมายเหตุตอนโดนสตันหมดทีม */
.stun-note{
  width:100%;padding:16px 20px;text-align:center;
  color:var(--rival);font-size:13px;
  background:linear-gradient(180deg,rgba(255,59,78,.08),transparent);
  border-top:3px solid var(--rival);
}

/* ---------- แถบรายงานผล: อยู่ใต้ปุ่ม ค้างไว้ให้อ่านทัน ---------- */
.duel-banner{
  margin:14px 20px 0;padding:12px 18px;min-height:46px;
  display:flex;align-items:center;
  background:var(--deck);border-left:3px solid var(--edge);
  font-size:14px;color:var(--steel);line-height:1.5;
  transition:border-color .2s,color .2s;
}
.duel-banner b{font-weight:600;color:var(--chalk);}
.duel-banner i{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:11px;opacity:.75;}
.duel-banner.result-atk{border-left-color:var(--you);color:var(--you);}
.duel-banner.result-atk b{color:var(--you);}
.duel-banner.result-def{border-left-color:var(--rival);color:var(--rival);}
.duel-banner.result-def b{color:var(--rival);}
.duel-banner.result-tie{border-left-color:var(--chalk);color:var(--chalk);}

/* ---------- แผงข้อมูลที่พับเก็บได้ ---------- */
.panels{margin:16px 20px 0;display:flex;flex-direction:column;gap:2px;}
details.matrix{background:var(--deck);border-left:3px solid var(--edge);}
details.matrix summary{
  cursor:pointer;padding:11px 18px;font-size:12.5px;color:var(--steel);
  font-weight:400;letter-spacing:.3px;list-style:none;
}
details.matrix summary::-webkit-details-marker{display:none;}
details.matrix summary::before{content:"▸ ";color:var(--edge);}
details[open].matrix summary::before{content:"▾ ";}
details.matrix summary:hover{color:var(--chalk);}
details.matrix summary:focus-visible{outline:2px solid var(--you);outline-offset:-2px;}
details.matrix > *:not(summary){margin:0 18px;}
details.matrix > *:last-child{margin-bottom:14px;}

.matrix table{width:100%;border-collapse:collapse;margin-top:4px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;}
.matrix td,.matrix th{padding:6px 8px;text-align:center;border:1px solid rgba(126,143,160,.16);}
.matrix th{color:var(--steel);font-weight:400;}
.matrix .win{color:var(--live);}
.matrix .lose{color:var(--rival);}
.matrix .note{margin:8px 0 0;color:var(--steel);font-size:11.5px;line-height:1.7;}
.matrix .note b{color:var(--chalk);font-weight:600;}

/* ---------- แผงสถิติสองทาง ---------- */
.tendencies{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 22px;margin-top:8px;}
.tend-block h4{margin:0 0 6px;font-size:10.5px;letter-spacing:1.2px;color:var(--steel);
  font-weight:600;text-transform:uppercase;}
.tend-row{display:flex;align-items:center;gap:8px;margin:3px 0;}
.tend-label{width:58px;font-size:11.5px;flex:none;}
.tend-bar{flex:1;height:6px;background:rgba(126,143,160,.14);overflow:hidden;}
.tend-bar i{display:block;height:100%;transition:width .3s;}
.tend-bar i.me{background:var(--you);}
.tend-bar i.them{background:var(--rival);}
.tend-pct{width:34px;text-align:right;flex:none;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--steel);}
.tend-note{margin:6px 0 0;font-size:10.5px;line-height:1.6;color:var(--steel);}

/* ---------- log: ม้วนบรรทัดล่าสุดไว้บนสุด ---------- */
.log{
  margin:16px 20px 0;max-height:132px;overflow-y:auto;
  background:rgba(0,0,0,.28);border-left:3px solid var(--edge);
  padding:10px 18px;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--steel);
  display:flex;flex-direction:column-reverse;line-height:1.7;
}
.log div{padding:2px 0;border-bottom:1px solid rgba(126,143,160,.08);}
.log div:first-child{color:var(--chalk);}

@media (max-width:720px){
  .controls{flex-direction:column;padding:0 12px;gap:2px;margin-top:12px;min-height:0;}
  .btn{padding:12px 14px;font-size:16px;}
  .btn small{margin-top:3px;}
  .duel-banner{margin:12px 12px 0;padding:10px 14px;font-size:13px;}
  .panels,.log{margin-left:12px;margin-right:12px;}
  .tendencies{grid-template-columns:1fr;}
}