/* ==================================================================
   scorebug.css — Broadcast Scorebug + GOAL/Card Animation
   ดีไซน์: บาร์ขาว โลโก้วงกลม + GOAL cover (scaleX เปิดเต็มบาร์)
   ทำงาน 1920×1080 / พื้นหลังโปร่งใส / transform+opacity เป็นหลัก
   ================================================================== */

:root{
  --safe:40px;
  --home:#1e5bb8;
  --away:#cf2029;
  --goal-color:#1e5bb8;
  --gold:#ffd84d;
  --dark:#07111d;
  --light:#f1f3f5;
  --fx-dur:4.4s;          /* ปรับระยะ animation ต่อเหตุการณ์ได้จาก JS */
  --bar-w:645px;
  --bar-h:58px;
  --logo-scale:1;         /* ปรับขนาดโลโก้รวม (?logo=1.4) */
  --logo-sm:50px;         /* โลโก้ในบาร์ */
  --tour:54px;            /* โลโก้รายการกลางบาร์ */
  --font:'Sarabun',Arial,Helvetica,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  width:1920px;height:1080px;overflow:hidden;
  background:transparent;            /* โปร่งใสสำหรับ vMix/OBS */
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
}
/* Preview: จำลองสนามเพื่อตรวจคอนทราสต์ */
body.is-preview{
  background:
    linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.10)),
    repeating-linear-gradient(90deg,#1f713e 0,#1f713e 140px,#267a45 140px,#267a45 280px);
}
#stage{position:relative;width:1920px;height:1080px}

/* Safe Area (debug) */
#safe-guide{display:none}
body.is-debug #safe-guide{
  display:block;position:absolute;inset:var(--safe);
  border:2px dashed rgba(255,255,255,.55);pointer-events:none;
}

/* ================= SCOREBUG ================= */
.overlay{
  position:absolute;top:var(--safe);left:var(--safe);z-index:20;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.38));
}
.score-wrap{position:relative;width:var(--bar-w)}

.scorebar{
  height:var(--bar-h);display:flex;overflow:hidden;
  border-radius:4px;position:relative;background:#fff;
}
.team{
  flex:1 1 0;min-width:0;display:flex;align-items:center;
  justify-content:flex-start;gap:12px;padding:0 14px;color:#fff;font-weight:900;
  position:relative;z-index:2;overflow:visible;
}
/* ไล่สีให้มีมิติ (เข้ม→สีหลัก→สว่าง) */
.team.away{justify-content:flex-end}   /* ทีมเยือน: ตัวย่อก่อน แล้วโลโก้ออกขอบนอก */
.team.home{background:linear-gradient(118deg,
   color-mix(in srgb,var(--home) 68%,#000) 0%, var(--home) 58%,
   color-mix(in srgb,var(--home) 82%,#fff) 130%);}
.team.away{background:linear-gradient(242deg,
   color-mix(in srgb,var(--away) 68%,#000) 0%, var(--away) 58%,
   color-mix(in srgb,var(--away) 82%,#fff) 130%);}
/* แสงไฮไลต์ด้านบน (เพิ่มมิติ) */
.team::before{content:"";position:absolute;left:0;right:0;top:0;height:48%;
   background:linear-gradient(180deg,rgba(255,255,255,.22),transparent);pointer-events:none;}
/* "ปาด" ทแยงสีรองตรงรอยต่อกับสกอร์ (มี sheen) */
.team.home::after{content:"";position:absolute;top:-18%;right:-12px;width:24px;height:136%;
   background:linear-gradient(90deg,var(--home-2,#ffd84d),color-mix(in srgb,var(--home-2,#ffd84d) 55%,#fff));
   transform:skewX(-16deg);box-shadow:-3px 0 12px rgba(0,0,0,.45);}
.team.away::after{content:"";position:absolute;top:-18%;left:-12px;width:24px;height:136%;
   background:linear-gradient(270deg,var(--away-2,#111),color-mix(in srgb,var(--away-2,#111) 55%,#fff));
   transform:skewX(-16deg);box-shadow:3px 0 12px rgba(0,0,0,.45);}

/* โลโก้ในบาร์: PNG เต็ม โปร่งใส ไม่ครอบวงกลม + ปรับขนาดได้ */
.logo-small{
  width:calc(var(--logo-sm) * var(--logo-scale));
  height:calc(var(--logo-sm) * var(--logo-scale));
  flex:0 0 auto;background:center/contain no-repeat;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.45));
}
.logo-small.empty{display:none}
.team-code{
  font-size:34px;font-weight:900;line-height:1;white-space:nowrap;
  letter-spacing:2px;text-transform:uppercase;flex:0 1 auto;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}

.score-center{min-width:184px;display:flex;align-items:center;justify-content:center;gap:6px;
  position:relative;z-index:1;overflow:visible;
  background:linear-gradient(180deg,#ffffff,var(--light));}

/* โลโก้รายการแข่งขัน — เหรียญตรากลางบาร์ ระหว่างเลขสกอร์ 2 ตัว */
.tour-logo{
  width:calc(var(--tour) * var(--logo-scale));height:calc(var(--tour) * var(--logo-scale));
  flex:0 0 auto;background:center/contain no-repeat;   /* PNG โปร่งใส ไม่ครอบวงกลม */
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.5));
  z-index:6;transition:opacity .2s ease;
}
.tour-logo.no-logo{filter:none;width:14px;height:14px}
.tour-logo.fx-hide{opacity:0}
.score-side{min-width:52px;display:grid;place-items:center;font-size:40px;font-weight:900;color:#0b1117;line-height:1}

/* ป้ายใบแดงค้างข้างทีม (กล่อง CSS ไม่ใช้ emoji เพื่อความเข้ากันได้บน vMix/OBS) */
.sb-red-badge{display:inline-flex;align-items:center;gap:2px;line-height:1}
.sb-red-badge[hidden]{display:none}            /* แก้ hidden ให้ทำงานแม้มี display อื่น */
.sb-red-badge .card-ico{width:11px;height:15px;background:#e5092b;border-radius:2px;display:inline-block;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.sb-red-count{font-style:normal;font-weight:900;font-size:12px;color:#fff}

/* นาฬิกา = กล่องกะทัดรัดใต้กลางบาร์ + ป้าย +5 ใต้เวลา / ป้ายใบขนาบข้าง */
.lower-bar{
  display:flex;align-items:flex-start;justify-content:center;gap:12px;
  background:transparent;margin-top:7px;color:#fff;font-weight:800;
}
.lb-clock{display:inline-flex;flex-direction:column;align-items:center;gap:4px}
.clock-box{
  background:var(--dark);color:#fff;border-radius:7px;padding:3px 16px;
  display:inline-flex;align-items:center;gap:8px;box-shadow:0 4px 10px rgba(0,0,0,.45);
}
.clock-period{font-size:11px;font-weight:700;opacity:.7;letter-spacing:.5px}
.clock-box .js-clock{font-size:22px;font-weight:900;font-variant-numeric:tabular-nums}
.sb-added{background:var(--gold);color:#111;font-weight:900;border-radius:5px;padding:1px 10px;font-size:13px;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.lb-cards{display:inline-flex;align-items:center;gap:5px;min-width:0;padding-top:7px}
.lb-cards.js-cards-away{justify-content:flex-start}
.cardtag{display:inline-flex;align-items:center;gap:2px;font-weight:900;font-size:12px}
.cardtag .ico-y{width:11px;height:15px;background:#f5c518;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.35);display:inline-block}
.cardtag .ico-r{width:11px;height:15px;background:#e5092b;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.35);display:inline-block}

/* ================= GOAL / CARD COVER ================= */
.goal-cover{
  position:absolute;inset:0;height:var(--bar-h);z-index:8;
  overflow:visible;pointer-events:none;opacity:0;
}
.goal-cover.show{opacity:1}

.goal-panel{
  position:absolute;inset:0;border-radius:4px;
  background:
    linear-gradient(115deg,rgba(255,255,255,.16),transparent 34%),
    linear-gradient(90deg,var(--goal-color),color-mix(in srgb,var(--goal-color) 72%,#000));
  transform:scaleX(0);transform-origin:left center;overflow:hidden;
}
.goal-cover.away .goal-panel{transform-origin:right center}
.goal-cover.show .goal-panel{animation:panelOpen var(--fx-dur) cubic-bezier(.2,.8,.2,1) forwards}
.goal-panel:before,.goal-panel:after{
  content:"";position:absolute;top:-40%;width:120px;height:190%;
  background:rgba(255,255,255,.10);transform:skewX(-24deg);
}
.goal-panel:before{left:24%}
.goal-panel:after{left:58%;opacity:.55}

.goal-word{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(.4);opacity:0;color:#fff;
  font-size:30px;font-weight:900;letter-spacing:4px;
  text-shadow:0 3px 12px rgba(0,0,0,.35);white-space:nowrap;
}
.goal-cover.show .goal-word{animation:goalWord var(--fx-dur) ease forwards}
.goal-code{display:inline-block;margin-left:12px;color:var(--gold);font-size:23px;letter-spacing:2px}

.logo-large{
  position:absolute;top:50%;left:14px;
  width:calc(86px * var(--logo-scale));height:calc(86px * var(--logo-scale));
  background:center/contain no-repeat;          /* PNG โปร่งใส ไม่ครอบวงกลม */
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.55));
  transform:translate(-125%,-50%) scale(.55) rotate(-18deg);opacity:0;
}
.goal-cover.away .logo-large{left:auto;right:14px;transform:translate(125%,-50%) scale(.55) rotate(18deg)}
.goal-cover.show .logo-large{animation:logoHome var(--fx-dur) cubic-bezier(.2,.8,.2,1) forwards}
.goal-cover.away.show .logo-large{animation:logoAway var(--fx-dur) cubic-bezier(.2,.8,.2,1) forwards}

.scorer-strip{
  position:absolute;top:var(--bar-h);left:0;width:100%;height:34px;
  background:var(--dark);color:#fff;border-radius:0 0 4px 4px;
  display:flex;align-items:center;gap:10px;padding:0 18px;
  transform:translateY(-100%);opacity:0;overflow:hidden;z-index:7;
}
.goal-cover.show .scorer-strip{animation:scorerDrop var(--fx-dur) cubic-bezier(.2,.8,.2,1) forwards}
.scorer-number{background:var(--goal-color);min-width:44px;padding:4px 10px;border-radius:999px;text-align:center;font-weight:900;font-size:12px}
.scorer-name{font-size:14px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scorer-time{color:#b9c6d4;font-size:12px;font-weight:800;margin-left:auto}

/* การ์ด: ใช้ไอคอนสี่เหลี่ยมแทนโลโก้ */
.goal-cover.is-card .logo-large{border-radius:8px;background:var(--goal-color);box-shadow:inset 0 0 0 3px rgba(255,255,255,.75)}
.goal-cover.is-card .scorer-number{border-radius:6px}

/* FREEZE: หยุดที่เฟรมเปิดเต็ม (preview/QA/ภาพนิ่ง)
   ใช้ !important เพื่อชนะกฎ .away.show ที่ specificity สูงกว่า */
.goal-cover.frozen{opacity:1}
.goal-cover.frozen .goal-panel{transform:scaleX(1)!important;animation:none!important}
.goal-cover.frozen .goal-word{opacity:1!important;transform:translate(-50%,-50%) scale(1)!important;animation:none!important}
.goal-cover.frozen .logo-large{opacity:1!important;transform:translate(0,-50%) scale(1) rotate(0)!important;animation:none!important}
.goal-cover.frozen .scorer-strip{opacity:1!important;transform:translateY(0)!important;animation:none!important}

.flash{position:absolute;inset:0;background:rgba(255,255,255,.36);opacity:0;pointer-events:none;z-index:9}
.flash.play{animation:flash .3s ease}

/* ================= keyframes ================= */
@keyframes panelOpen{0%{transform:scaleX(0)}12%{transform:scaleX(1)}82%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes goalWord{
  0%,8%{opacity:0;transform:translate(-50%,-50%) scale(.45)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
  25%,80%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.8)}
}
@keyframes logoHome{
  0%,8%{opacity:0;transform:translate(-125%,-50%) scale(.55) rotate(-18deg)}
  19%{opacity:1;transform:translate(0,-50%) scale(1.08) rotate(3deg)}
  27%,80%{opacity:1;transform:translate(0,-50%) scale(1) rotate(0)}
  100%{opacity:0;transform:translate(-125%,-50%) scale(.65) rotate(-12deg)}
}
@keyframes logoAway{
  0%,8%{opacity:0;transform:translate(125%,-50%) scale(.55) rotate(18deg)}
  19%{opacity:1;transform:translate(0,-50%) scale(1.08) rotate(-3deg)}
  27%,80%{opacity:1;transform:translate(0,-50%) scale(1) rotate(0)}
  100%{opacity:0;transform:translate(125%,-50%) scale(.65) rotate(12deg)}
}
@keyframes scorerDrop{
  0%,15%{transform:translateY(-100%);opacity:0}
  27%{transform:translateY(0);opacity:1}
  82%{transform:translateY(0);opacity:1}
  100%{transform:translateY(-100%);opacity:0}
}
@keyframes flash{0%{opacity:0}45%{opacity:.2}100%{opacity:0}}

/* ================= test panel + conn ================= */
#test-panel{
  position:fixed;right:16px;bottom:16px;display:flex;flex-wrap:wrap;gap:8px;
  max-width:360px;padding:12px;background:rgba(0,0,0,.8);border-radius:10px;z-index:9999;
}
#test-panel strong{width:100%;color:#fff;font-size:13px}
#test-panel button{font-size:13px;padding:8px 10px;border:0;border-radius:6px;background:#2b6cff;color:#fff;cursor:pointer}
#test-panel button:hover{filter:brightness(1.1)}

#conn-status{display:none;position:absolute;right:var(--safe);bottom:var(--safe);font-size:14px}
body.is-debug #conn-status{display:block}
#conn-status.status-online{color:#2ecc71}
#conn-status.status-offline{color:#e74c3c}