/* base.css — โทเคนธีม โครงหน้า สกอร์บอร์ดแบบกราฟิกทีวี ตัวเลือกความยาก และ modal
   ทิศทาง: "ถ่ายทอดสด" — จอคือภาพการแข่ง ข้อมูลลอยทับเป็นกราฟิกทีวี
   รูปทรงเฉียง 12 องศาคือลายเซ็นของธีมนี้ ใช้ซ้ำทุกที่ที่เป็นแถบข้อมูล */
:root{
  --ink:#080C11;
  --deck:#0F161E;
  --deck-2:#141E29;
  --edge:#22303E;
  --steel:#7E8FA0;
  --chalk:#FFFFFF;
  --you:#FFD23F;
  --you-deep:#3A2D00;
  --rival:#FF3B4E;
  --rival-deep:#3B0D14;
  --live:#22D07A;
  --skew:-12deg;
  --unskew:12deg;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--ink);
  color:var(--chalk);
  /* ถ้าโหลด Kanit จาก Google Fonts ไม่ได้ (ไม่มีเน็ต) ต้องตกไปที่ฟอนต์ไทยที่มีจริงในเครื่อง
     ไม่ใช่ sans-serif ลอยๆ ซึ่งบางเครื่องจะได้ฟอนต์ไทยที่อ่านยาก */
  font-family:'Kanit','Leelawadee UI','Noto Sans Thai','Sarabun',system-ui,-apple-system,sans-serif;
  font-weight:400;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  display:flex;
  justify-content:center;
  padding:0 0 44px;
}
.app{width:100%;max-width:1080px;}

/* ---------- score bug: แท่งเฉียงมุมบนซ้ายของภาพ ---------- */
.bug{
  position:absolute;top:20px;left:20px;z-index:6;
  display:flex;align-items:stretch;height:44px;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.55));
}
.bug > *{transform:skewX(var(--skew));}
.bug > * > span{transform:skewX(var(--unskew));display:block;}
.bug .side{display:flex;align-items:center;gap:10px;padding:0 16px;background:#111A24;
  font-weight:600;font-size:15px;letter-spacing:.3px;}
.bug .side i{width:5px;height:22px;display:block;transform:none;}
.bug .side.you i{background:var(--you);}
.bug .side.rival i{background:var(--rival);}
.bug .score{background:var(--chalk);color:var(--ink);display:flex;align-items:center;padding:0 18px;
  font-weight:700;font-size:24px;letter-spacing:1px;font-variant-numeric:tabular-nums;gap:8px;}
.bug .score .num{transform:skewX(var(--unskew));display:block;min-width:16px;text-align:center;}
.bug .score .dash{transform:skewX(var(--unskew));display:block;opacity:.4;}
.bug .clock{background:#0B1219;border-left:2px solid var(--edge);display:flex;align-items:center;
  padding:0 14px;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--steel);
  font-variant-numeric:tabular-nums;}
.bug .clock.low{color:var(--rival);}

/* ---------- แถบมุมบนขวา: สถานะสด + เงื่อนไขชนะ ---------- */
.livetag{position:absolute;top:24px;right:20px;z-index:6;display:flex;align-items:center;gap:7px;
  font-size:11px;letter-spacing:2px;font-weight:600;}
.livetag i{width:8px;height:8px;border-radius:50%;background:var(--live);
  box-shadow:0 0 10px var(--live);animation:blip 1.6s infinite;}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}
.target{position:absolute;top:52px;right:20px;z-index:6;font-size:11px;color:var(--steel);letter-spacing:.5px;}

/* ปุ่มปิดเสียง — วางคู่กับสถานะสด เพราะเป็นของคุมการรับชมเหมือนกัน */
.mute-btn{
  position:absolute;top:18px;right:96px;z-index:7;
  background:rgba(11,18,25,.8);border:1px solid rgba(126,143,160,.35);
  color:var(--steel);width:30px;height:24px;line-height:1;
  font-size:12px;cursor:pointer;padding:0;
  transform:skewX(var(--skew));transition:all .15s;
}
.mute-btn span{display:block;transform:skewX(var(--unskew));}
.mute-btn:hover{border-color:var(--chalk);color:var(--chalk);}
.mute-btn:focus-visible{outline:2px solid var(--you);outline-offset:2px;}
.mute-btn.off{opacity:.55;}

/* ---------- ตัวเลือกความยาก: เม็ดเล็กมุมล่างขวาของภาพ ---------- */
.difficulty-row{position:absolute;right:20px;bottom:18px;z-index:6;
  display:flex;align-items:center;gap:6px;}
.difficulty-row .diff-label{font-size:10px;color:var(--steel);letter-spacing:1.4px;
  text-transform:uppercase;margin-right:2px;}
.diff-btn{
  border:1px solid rgba(126,143,160,.35);background:rgba(11,18,25,.8);color:var(--steel);
  font-family:inherit;font-size:11px;font-weight:600;letter-spacing:.4px;
  padding:5px 12px;cursor:pointer;transform:skewX(var(--skew));transition:all .15s;
}
.diff-btn span{display:block;transform:skewX(var(--unskew));}
.diff-btn:hover{border-color:var(--chalk);color:var(--chalk);}
.diff-btn:focus-visible{outline:2px solid var(--you);outline-offset:2px;}
.diff-btn.active{background:var(--chalk);border-color:var(--chalk);color:var(--ink);}

/* ---------- modal จบเกม ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(4,7,10,.86);
  display:none;align-items:center;justify-content:center;z-index:50;padding:20px;
}
.modal-overlay.show{display:flex;}
.modal{
  background:linear-gradient(160deg,var(--deck-2),var(--ink));
  border-left:4px solid var(--you);
  padding:30px 34px;max-width:400px;text-align:center;
  transform:skewX(var(--skew));
  box-shadow:0 20px 60px rgba(0,0,0,.7);
}
.modal > *{transform:skewX(var(--unskew));}
.modal h2{font-size:26px;font-weight:700;letter-spacing:.5px;margin:0 0 4px;color:var(--you);}
.modal .final-score{font-size:52px;font-weight:700;letter-spacing:2px;margin:8px 0;
  font-variant-numeric:tabular-nums;}
.modal p{color:var(--steel);margin:2px 0 20px;font-size:13px;}
.modal button{
  background:var(--you);color:var(--ink);border:0;padding:12px 26px;
  font-family:inherit;font-weight:600;font-size:14px;cursor:pointer;
  transform:skewX(var(--skew));
}
.modal button span{display:block;transform:skewX(var(--unskew));}
.modal button:hover{background:var(--chalk);}
.modal button:focus-visible{outline:2px solid var(--chalk);outline-offset:3px;}
.modal button+button{margin-left:10px;}
.modal button.ghost{background:transparent;border:1px solid var(--edge);color:var(--steel);}
.modal button.ghost:hover{background:transparent;border-color:var(--chalk);color:var(--chalk);}

/* ---------- โหมดเล่น / ออนไลน์ ---------- */
.online-modal{max-width:440px;}
.online-tabs{display:flex;gap:10px;margin-bottom:18px;}
.online-tabs .online-tab-btn{flex:1;background:var(--deck);color:var(--steel);
  border:1px solid var(--edge);}
.online-tabs .online-tab-btn.active{background:var(--you);color:var(--ink);border-color:var(--you);}
.online-pane p{margin:0 0 10px;}
.room-code{
  font-family:'IBM Plex Mono',monospace;font-size:22px;font-weight:600;letter-spacing:1px;
  color:var(--live);background:rgba(0,0,0,.28);border-left:3px solid var(--live);
  padding:12px 16px;margin-bottom:14px;word-break:break-all;
}
.online-pane input{
  width:100%;box-sizing:border-box;background:rgba(0,0,0,.28);border:1px solid var(--edge);
  color:var(--chalk);padding:11px 14px;font-family:'IBM Plex Mono',monospace;font-size:15px;
  margin-bottom:14px;transform:skewX(var(--skew));
}
.online-pane input:focus-visible{outline:2px solid var(--you);}
.online-status{min-height:18px;color:var(--steel);font-size:12.5px;margin:6px 0 16px !important;}
.online-status.err{color:var(--rival);}
.online-status.ok{color:var(--live);}

@media (prefers-reduced-motion:reduce){
  .livetag i{animation:none;}
}

@media (max-width:720px){
  .bug{height:36px;top:12px;left:12px;}
  .bug .side{padding:0 10px;font-size:12px;gap:7px;}
  .bug .side i{height:16px;width:4px;}
  .bug .score{font-size:18px;padding:0 12px;}
  .bug .clock{padding:0 9px;font-size:11px;}
  .livetag{top:14px;right:12px;font-size:10px;}
  .mute-btn{top:10px;right:82px;}
  .target{top:38px;right:12px;font-size:10px;}
  .difficulty-row{right:12px;bottom:12px;}
  .diff-btn{padding:4px 9px;font-size:10px;}
  .modal{padding:24px 26px;}
  .modal .final-score{font-size:40px;}
}