/* ==================================================================
   control.css — หน้าควบคุมการแข่งขัน (Match Control)
   เน้นปุ่มใหญ่ อ่านง่าย ใช้บนแท็บเล็ต/โน้ตบุ๊ก
   ================================================================== */
:root { --ink:#10141b; --panel:#1b212c; --line:#2b3240; }

body {
    background: #0c0f15;
    color: #eef1f6;
    font-family: 'Sarabun','Segoe UI',system-ui,sans-serif;
    padding-bottom: 40px;
}
.ctl-wrap { max-width: 1100px; margin: 0 auto; padding: 16px; }

/* header */
.ctl-header {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 16px;
}
.ctl-tour { text-align: center; opacity: .8; font-size: 15px; margin-bottom: 8px; }
.ctl-scoreline {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}
.ctl-team { display: flex; align-items: center; gap: 10px; }
.ctl-team.away { justify-content: flex-end; }
.ctl-team .ctl-code {
    font-size: 28px; font-weight: 800; letter-spacing: 2px;
    background: var(--c,#345); padding: 4px 12px; border-radius: 8px;
}
.ctl-logo {
    width: 46px; height: 46px; border-radius: 8px;
    background: #2a3140 center/contain no-repeat;
}
.ctl-name { font-size: 15px; opacity: .85; }
.ctl-center { text-align: center; }
.ctl-score { font-size: 46px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.ctl-clock { font-size: 18px; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* blocks */
.ctl-block {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 16px;
}
.ctl-block h2 { font-size: 16px; opacity: .75; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px; }

.btn-grid { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn-grid .btn { min-width: 120px; }
.added-label { opacity: .75; }

/* event grid: ปุ่มใหญ่ 2 คอลัมน์ (เหย้า/เยือน) */
.event-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.event-grid .btn {
    font-size: 18px; font-weight: 700; padding: 16px;
    border-radius: 12px;
}
.event-grid .ev-goal { background: #16a34a; color: #fff; font-size: 22px; }
.event-grid .ev-goal small { font-size: 14px; opacity: .9; }
.event-grid .ev-yellow { background: #f5c518; color: #1a1a1a; }
.event-grid .ev-red { background: #e5092b; color: #fff; }
.event-grid .btn:active { transform: scale(.97); }

.proto-note { font-size: 13px; opacity: .7; text-align: center; }
.proto-note code { color: #ffd84d; }

/* ===== Player picker modal (2 คลิก) ===== */
.player-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 6px;
}
.player-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 14px; border: 2px solid #d9dee8; border-radius: 12px;
    background: #fff; cursor: pointer; font-size: 17px; text-align: left;
}
.player-btn:hover { border-color: #2b6cff; background: #f3f7ff; }
.player-btn .pnum { font-weight: 800; color: #2b6cff; min-width: 38px; }
.player-btn.off-field { opacity: .55; }
.picker-tabs { display: flex; gap: 8px; margin-bottom: 6px; }
.picker-extra { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ===== Team panels + roster (กดเลือกผู้เล่นแล้วบันทึกทันที) ===== */
.team-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 820px) { .team-panels { grid-template-columns: 1fr; } }
.team-panel { background: #141a24; border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.tp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.tp-code { font-size: 26px; font-weight: 900; letter-spacing: 2px; background: var(--c,#345); padding: 4px 14px; border-radius: 8px; color: #fff; }
.mode-seg { display: flex; gap: 4px; }
.mode-btn { border: 1px solid #3a4150; background: #20283400; color: #cfd6e2; border-radius: 8px; padding: 6px 10px; font-weight: 700; font-size: 14px; cursor: pointer; }
.mode-btn.active { background: #16a34a; color: #fff; border-color: #16a34a; }
.mode-btn.mode-y.active { background: #f5c518; color: #1a1a1a; border-color: #f5c518; }
.mode-btn.mode-r.active { background: #e5092b; color: #fff; border-color: #e5092b; }

.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.player-btn {
    display: flex; align-items: center; gap: 6px; padding: 12px 10px;
    border: 2px solid #2b3240; border-radius: 10px; background: #1b2230; color: #eef1f6;
    cursor: pointer; font-size: 16px; text-align: left; position: relative;
}
.player-btn:hover { border-color: #2b6cff; background: #20304a; }
.player-btn:active { transform: scale(.97); }
.player-btn.off-field { opacity: .5; }
.player-btn.sent-off { opacity: .45; border-color: #e5092b; }
.player-btn .pnum { font-weight: 900; color: #6fa8ff; min-width: 34px; }
.player-btn .pname { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-btn .pcards { margin-left: auto; display: inline-flex; gap: 3px; align-items: center; }
.cardpip { display: inline-flex; align-items: center; font-size: 11px; font-weight: 800; }
.pip-y { width: 9px; height: 13px; background: #f5c518; border-radius: 2px; display: inline-block; box-shadow: 0 0 0 1px rgba(0,0,0,.3); }
.pip-r { width: 9px; height: 13px; background: #e5092b; border-radius: 2px; display: inline-block; box-shadow: 0 0 0 1px rgba(0,0,0,.3); }
.tp-extra { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }