.match-modal-overlay{
position:fixed;
inset:0;
background:rgba(15,23,42,.35);
backdrop-filter:blur(6px);
z-index:80;
display:none;
padding:calc(10px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left));
overflow:auto
}
.match-modal-overlay.active{display:flex}
.match-modal{
width:100%;
max-width:620px;
margin:auto;
border-radius:18px;
overflow:hidden;
box-shadow:0 18px 50px rgba(15,23,42,.22);
background:#fff;
border:1px solid #e5e7eb;
display:flex;
flex-direction:column;
max-height:calc(100vh - 20px);
height:calc(100vh - 20px);
max-height:calc(100dvh - 20px);
height:calc(100dvh - 20px);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:geometricPrecision
}

@media (max-width:640px){
.match-modal-overlay{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.match-modal{height:calc(100vh - 16px);max-height:calc(100vh - 16px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px)}
}

@media (min-width:1280px){
.match-modal{max-width:600px;max-height:calc(100vh - 56px);height:calc(100vh - 56px);max-height:calc(100dvh - 56px);height:calc(100dvh - 56px)}
}

@media (min-width:1536px){
.match-modal{max-width:560px}
}
.match-modal svg{shape-rendering:geometricPrecision}
.match-modal-header{
padding:16px 16px 14px;
border-bottom:1px solid #e5e7eb;
background:linear-gradient(180deg,#fff 0%,#f8fafc 100%);
position:relative
}

@media (min-width:1024px){
.match-modal-header{padding:12px 12px 10px}
.match-modal-tabs{padding:8px 12px 0}
.match-modal-body{padding:12px 12px 14px}
.match-modal{max-height:calc(100vh - 80px);height:calc(100vh - 80px);max-height:calc(100dvh - 80px);height:calc(100dvh - 80px)}
}
.match-modal-close{
appearance:none;
border:none;
background:#f1f5f9;
color:#0f172a;
border:1px solid #e2e8f0;
width:36px;
height:36px;
border-radius:12px;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer
}
.match-modal-close:hover{background:#e2e8f0}
.match-modal-meta{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:12px
}
.match-modal-meta .title{
color:#0f172a;
font-weight:800;
font-size:14px;
letter-spacing:.02em
}
.match-modal-meta .subtitle{
color:#64748b;
font-size:12px;
font-weight:700
}
.match-hero{
display:grid;
grid-template-columns:1fr auto 1fr;
gap:12px;
align-items:center
}
.match-modal .team-box{
display:flex;
flex-direction:column!important;
gap:6px;
align-items:center!important;
justify-content:center;
min-width:0;
text-align:center
}
.team-logo{
width:62px;
height:62px;
border-radius:14px;
background:#fff;
border:1px solid #e5e7eb;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
flex:0 0 auto
}
.team-logo img{width:44px;height:44px;object-fit:contain}
.team-name{
color:#0f172a;
font-weight:600;
font-size:14px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}
.team-sub{
color:#64748b;
font-size:11px;
font-weight:700;
margin-top:2px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}
.score-box{
text-align:center;
padding:10px 12px;
border-radius:16px;
background:#f1f5f9;
border:1px solid #e2e8f0;
min-width:120px
}
.score{
font-size:32px;
font-weight:900;
color:#0f172a;
font-variant-numeric:tabular-nums;
line-height:1
}
.score .score-main{display:block}
.score .score-sub{
display:block;
margin-top:4px;
font-size:14px;
font-weight:700;
color:#475569;
line-height:1.1
}
.status{
margin-top:6px;
font-size:11px;
letter-spacing:.10em;
text-transform:uppercase;
font-weight:800;
color:#2563eb
}
.match-modal-tabs{
display:flex;
gap:18px;
padding:10px 14px 0;
background:#fff;
border-bottom:1px solid #e5e7eb;
overflow-x:auto;
-ms-overflow-style:none;
scrollbar-width:none
}
.match-modal-tabs::-webkit-scrollbar{display:none}
.match-tab{
border:none;
background:transparent;
color:#6b7280;
padding:12px 0;
border-radius:0;
font-size:13px;
font-weight:600;
letter-spacing:.04em;
text-transform:uppercase;
cursor:pointer;
white-space:nowrap;
border-bottom:none;
position:relative
}
.match-tab::after{
content:'';
position:absolute;
left:0;
right:0;
bottom:-1px;
height:3px;
background:transparent
}
.match-tab.active{background:transparent;color:#e11d48}
.match-tab.active::after{background:#e11d48}
.match-modal-body{
padding:14px 14px 16px;
overflow:hidden;
flex:1 1 auto;
min-height:0
}
.match-panel{display:block}
.match-panel{
position:absolute;
inset:0;
opacity:0;
pointer-events:none;
overflow:auto;
-webkit-overflow-scrolling:touch;
transition:opacity .12s ease;
}
.match-panel.active{opacity:1;pointer-events:auto}
.match-modal-body{position:relative}
.panel-card{
background:#fff;
border:1px solid #e5e7eb;
border-radius:16px;
padding:12px
}
.pm-ps-wrap{width:100%}
.pm-ps-section{
background:#fff;
border:1px solid #e5e7eb;
border-radius:16px;
overflow:hidden
}
.pm-ps-table{
width:100%;
border-collapse:collapse;
table-layout:fixed;
font-variant-numeric:tabular-nums
}
.pm-ps-col-player{width:auto}
.pm-ps-col-num{width:34px}
.pm-ps-col-num-wide{width:44px}
.pm-ps-table .pm-ps-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.pm-ps-dash{color:#111827;font-weight:600;font-size:12px;line-height:1}
.pm-ps-table thead th{
background:#f3f4f6;
color:#6b7280;
font-weight:600;
font-size:11px;
letter-spacing:.08em;
text-transform:uppercase;
padding:8px 6px;
border-bottom:1px solid #e5e7eb;
text-align:center
}
.pm-ps-table thead th.pm-ps-left{text-align:left}
.pm-ps-table tbody td{
padding:8px 6px;
border-bottom:1px solid #f1f5f9;
text-align:center;
font-weight:600;
color:#0f172a;
font-size:12px;
white-space:nowrap
}
.pm-ps-table tbody tr:last-child td{border-bottom:none}
.pm-ps-table tbody td.pm-ps-left{
text-align:left;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}
.pm-ps-name{
display:flex;
align-items:center;
gap:8px;
min-width:0
}
.pm-ps-avatar{
width:26px;
height:26px;
border-radius:999px;
object-fit:cover;
flex:0 0 auto;
background:#e5e7eb
}
.pm-ps-name-text{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-weight:600;
color:#0f172a;
font-size:12px
}
.panel-title{color:#0f172a;font-weight:900;font-size:13px;margin-bottom:10px}
.muted{color:#475569;font-size:13px}
.pm-tl-period{margin-top:8px}
.pm-tl-period-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:8px 10px;
border-radius:12px;
background:#f3f4f6;
border:1px solid #e5e7eb
}
.pm-tl-period-name{font-weight:600;color:#111827;letter-spacing:.06em;text-transform:uppercase;font-size:12px}
.pm-tl-period-score{font-weight:600;color:#111827;font-variant-numeric:tabular-nums;font-size:12px}
.pm-tl-event{padding:6px 4px;border-bottom:1px solid #eef2f7}
.pm-tl-event:last-child{border-bottom:none}
.pm-tl-event-main{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px
}
.pm-tl-left{
display:flex;
align-items:center;
gap:10px;
min-width:0;
flex:1 1 auto
}
.pm-tl-right{
display:flex;
align-items:center;
gap:10px;
flex:0 0 auto
}
.pm-tl-event--home .pm-tl-event-main{flex-direction:row-reverse}
.pm-tl-event--away .pm-tl-event-main{justify-content:flex-end}
.pm-tl-event--away .pm-tl-left{flex:1 1 auto;justify-content:flex-end;text-align:right}
.pm-tl-event--away .pm-tl-desc{text-align:right}
.pm-tl-name{
font-weight:500;
color:#111827;
font-size:14px;
line-height:1.1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}
.pm-tl-scorer{font-weight:600;color:#0f172a}
.pm-tl-pen-name{font-weight:500;color:#0f172a}
.pm-tl-sub{
color:#6b7280;
font-weight:500;
font-size:12px;
line-height:1.15;
margin-top:2px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}
.pm-tl-desc{
color:#6b7280;
font-weight:500;
font-size:12px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}
.pm-tl-pill{
display:inline-flex;
align-items:center;
gap:8px;
padding:5px 8px;
border-radius:10px;
background:#fff;
border:1px solid #e5e7eb;
font-weight:600;
color:#111827;
font-variant-numeric:tabular-nums;
white-space:nowrap
}
.pm-puck{width:16px !important;height:16px !important;max-width:16px !important;max-height:16px !important;object-fit:contain !important;display:inline-block !important;flex:0 0 auto !important}
.pm-puck-ic{width:16px;height:16px;max-width:16px;max-height:16px;display:inline-block;flex:0 0 auto;background:url('/images/puck.png') center/contain no-repeat}
.pm-puck-ic--miss{filter:grayscale(1);opacity:.35}
.pm-tl-pill svg,.pm-tl-pill img{width:16px;height:16px;max-width:16px;max-height:16px;object-fit:contain;display:inline-block;flex:0 0 auto}
.pm-tl-pill .pm-puck-ic{width:16px;height:16px;max-width:16px;max-height:16px}
.pm-tl-time{font-weight:500;color:#6b7280;font-variant-numeric:tabular-nums;white-space:nowrap}
.pm-tl-pen-badges{display:inline-flex;align-items:center;gap:6px}
.pm-tl-pen-badge{
width:28px;
height:24px;
border-radius:7px;
background:#facc15;
color:#111827;
border:1px solid #eab308;
display:inline-flex;
align-items:center;
justify-content:center;
font-weight:600;
font-size:13px;
font-variant-numeric:tabular-nums
}
.pm-tl-pen-plus{font-weight:600;color:#6b7280}

 .pm-so-block{margin-top:10px}
 .pm-so-list{padding:6px 2px 2px}
 .pm-so-row{
 display:grid;
 grid-template-columns: 26px 1fr 1fr;
 gap:10px;
 align-items:center;
 padding:8px 6px;
 border-bottom:1px solid #eef2f7
 }
 .pm-so-row:last-child{border-bottom:none}
 .pm-so-num{
 text-align:center;
 font-weight:700;
 color:#64748b;
 font-size:12px;
 font-variant-numeric:tabular-nums
 }
 .pm-so-side{display:flex;align-items:center;gap:8px;min-width:0}
 .pm-so-side--home{justify-content:flex-start}
 .pm-so-side--away{justify-content:flex-end}
 .pm-so-text{min-width:0;white-space:nowrap;overflow:visible;text-overflow:clip;font-size:14px;color:#111827;line-height:1.15}
 .pm-so-name{font-weight:600;color:#0f172a}
 .pm-so-desc{color:#6b7280;font-weight:500;font-size:12px}
 .pm-so-ic{
 width:22px;
 height:22px;
 border-radius:999px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 flex:0 0 auto;
 font-weight:900;
 border:1px solid #e5e7eb;
 background:#fff;
 color:#0f172a
 }
 .pm-so-ic img{width:16px !important;height:16px !important;max-width:16px !important;max-height:16px !important;object-fit:contain !important;display:inline-block !important}
 .pm-so-ic .pm-puck-ic{width:16px;height:16px;max-width:16px;max-height:16px}
 .pm-so-ic--miss{background:#fee2e2;border-color:#fecaca;color:#991b1b}
 .pm-so-ic--goal{background:#dcfce7;border-color:#bbf7d0;color:#166534}
@media (max-width:420px){
.match-hero{grid-template-columns:1fr}
.score-box{margin:0 auto}
.pm-tl-name{font-size:15px}
.pm-tl-sub{font-size:12px}
.pm-tl-desc{font-size:12px}
.pm-tl-pill{padding:5px 8px}
.pm-tl-time{font-size:12px}
 .pm-so-row{grid-template-columns:22px 1fr 1fr;gap:8px}
 .pm-so-text{font-size:13px}
}
@media (max-width:640px){
.match-modal-overlay{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.match-modal{border-radius:0;max-height:100vh;max-height:100dvh}
.match-modal-header{padding:14px 14px 12px}
.team-logo{width:56px;height:56px;border-radius:16px}
.team-logo img{width:40px;height:40px}
.score-box{min-width:98px;padding:10px 10px;border-radius:16px}
.score{font-size:28px}
.score .score-sub{font-size:13px;margin-top:3px}
.match-modal-body{padding:12px}
.pm-ps-table thead th{padding:6px 4px;font-size:10px}
.pm-ps-table tbody td{padding:6px 4px;font-size:11px}
.pm-ps-avatar{width:22px;height:22px}
.pm-ps-name-text{font-size:11px}
.pm-ps-name{gap:6px}
}