.chilli-play { padding:0!important; overflow:hidden; }
.chilli-play-header,.chilli-play-score,.chilli-play-controls,.chilli-play-feed-head { display:flex;align-items:center;gap:12px;padding:14px 20px; }
.chilli-play-header { border-bottom:1px solid var(--border);justify-content:space-between; }
.chilli-play-header>div { display:flex;align-items:center;gap:12px; }
.chilli-play-header h3 { margin:0;font-size:19px;letter-spacing:-.5px; }
.chilli-play-mode { color:var(--secondary);font-size:10px;font-weight:750;letter-spacing:1px; }
.chilli-play button { font:inherit;color:var(--text);cursor:pointer; }
.chilli-play-header button,.chilli-play-controls button { border:1px solid var(--border);border-radius:24px;padding:7px 12px;background:var(--surface);font-size:12px;white-space:nowrap; }
.chilli-play button:focus-visible,.chilli-play input:focus-visible { outline:2px solid #c79dff;outline-offset:2px; }
.chilli-play button:disabled { opacity:.35;cursor:default; }
.chilli-play-score { justify-content:center;gap:24px; }
.chilli-play-score>span { display:flex;align-items:center;gap:9px;flex:1;min-width:0;font-size:13px; }
.chilli-play-score>span:first-child { justify-content:flex-end; }
.chilli-play-score>span:last-child { flex-direction:row-reverse;justify-content:flex-end; }
.chilli-play-score>span::after { content:"";width:6px;height:6px;flex:none;border-radius:50%;background:var(--home); }
.chilli-play-score>span:last-child::after { background:var(--away); }
.chilli-play-score .crest { width:28px;height:28px; }
.chilli-play-score strong { font-size:25px;white-space:nowrap;font-variant-numeric:tabular-nums; }
.chilli-play-pitch { position:relative;isolation:isolate;width:100%;min-width:0;box-sizing:border-box;aspect-ratio:5/3;min-height:235px;max-height:520px;background:repeating-linear-gradient(90deg,#183f32 0 10%,#1b4638 10% 20%);color:#fff;overflow:hidden; }
.chilli-play-field,.chilli-play-trace { position:absolute;inset:0;width:100%;height:100%;pointer-events:none; }
.chilli-play-field { color:#bdd5c185; }
.chilli-play-trace path { fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:5 4;vector-effect:non-scaling-stroke; }
.chilli-play-trace { z-index:1; }
.chilli-play-ball { position:absolute;z-index:3;left:var(--from-x);top:var(--from-y);font:20px/1 sans-serif;transform:translate(-50%,-50%);filter:drop-shadow(0 2px 4px #0008);animation:cp-shot 1.3s ease-out both; }
@keyframes cp-shot { from{left:var(--from-x);top:var(--from-y);}to{left:var(--to-x);top:var(--to-y);} }
.chilli-play-directions { position:absolute;top:9px;left:18px;right:18px;display:flex;justify-content:space-between;color:#e3f1e1bf;font-size:10px;font-weight:700;letter-spacing:.6px; }
.chilli-play-callout { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;width:max-content;max-width:80%;padding:14px 20px;background:#0b211edb;border:1px solid #b6d5c72e;border-radius:12px;box-shadow:0 8px 25px #0002;text-align:center; }
.chilli-play-callout.has-location { top:auto;bottom:25px;transform:translateX(-50%);padding:8px 15px;gap:3px; }
.chilli-play-callout.has-location>.cp-symbol { display:none; }
.chilli-play-callout strong { font-size:20px;line-height:1.2; }
.chilli-play-callout.has-location strong { font-size:15px; }
.chilli-play-callout>span:not(.cp-symbol),.chilli-play-callout time { font-size:12px;color:#e2ece4; }
.chilli-play-location { position:absolute;bottom:7px;left:0;right:0;text-align:center;font-size:9px;color:#e1eee1c9; }
.chilli-play-description { min-height:65px;padding:16px 20px;font-size:14px;line-height:1.55;border-bottom:1px solid var(--border); }
.chilli-play-controls { flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--border); }
.chilli-play-controls [data-cp-play] { min-width:65px;background:var(--text);color:var(--surface);font-weight:700; }
.chilli-play-controls .cp-latest { margin-left:auto; }
.chilli-play-controls input { flex:1;min-width:80px;accent-color:#b779ef; }
.cp-count { font-size:11px;color:var(--secondary);font-variant-numeric:tabular-nums; }
.chilli-play-feed-head { justify-content:space-between;font-size:12px; }
.chilli-play-feed-head>span { color:var(--secondary);font-size:10px; }
.chilli-play-feed-head .is-stale { color:#dd9c48; }
.chilli-play-feed { margin:0;padding:0 8px;list-style:none;max-height:430px;overflow:auto;overscroll-behavior:contain; }
.chilli-play-feed li>button { display:grid;grid-template-columns:42px 28px minmax(0,1fr);gap:10px;align-items:start;width:100%;padding:12px;border:0;border-radius:8px;background:transparent;text-align:left; }
.chilli-play-feed button:hover { background:color-mix(in srgb,var(--text) 5%,transparent); }
.chilli-play-feed button[aria-current=true] { background:color-mix(in srgb,#ad74e9 14%,var(--surface));box-shadow:inset 3px 0 #b779ef; }
.chilli-play-feed time { font-size:12px;color:var(--secondary);font-variant-numeric:tabular-nums; }
.chilli-play-feed b { display:block;font-size:13px; }
.chilli-play-feed small { display:block;margin-top:4px;font-size:12px;line-height:1.5;color:var(--secondary); }
.cp-symbol { font:18px/1.1 sans-serif; }
.cp-yellow { color:#eccd31; }.cp-red { color:#f04040; }.cp-sub { color:#26c38e; }
.chilli-play-note { margin:0;padding:12px 20px;font-size:10px;line-height:1.5;color:var(--secondary);border-top:1px solid var(--border); }
.chilli-play:fullscreen,.chilli-play.is-expanded { background:var(--surface);overflow:auto;max-height:100dvh;width:100%;border-radius:0; }
.chilli-play.is-expanded { position:fixed;inset:0;z-index:10000; }
.chilli-play:fullscreen .chilli-play-pitch,.chilli-play.is-expanded .chilli-play-pitch { margin:auto;width:min(100%,1100px);max-height:60dvh; }
@media(max-width:600px){
 .chilli-play-header,.chilli-play-score,.chilli-play-controls,.chilli-play-feed-head { padding:12px; }
 .chilli-play-header h3 { font-size:17px; }.chilli-play-header>div { gap:8px; }
 .chilli-play-header button { padding:7px 10px;font-size:11px; }
 .chilli-play-score { gap:16px; }.chilli-play-score>span { font-size:12px; }
 .chilli-play-description { padding:12px;font-size:13px; }
 .chilli-play-controls input { flex-basis:calc(100% - 70px); }
 .chilli-play-feed li>button { padding:11px 8px;grid-template-columns:35px 22px minmax(0,1fr);gap:7px; }
}
@media(prefers-reduced-motion:reduce){.chilli-play-ball{animation:none;left:var(--to-x);top:var(--to-y);}}

/* Match-centre visual system */
.chilli-play {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	min-width: 0;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 94%, #23382c));
	box-shadow: 0 12px 32px #0002;
}
.chilli-play-header { min-height: 60px; padding: 12px 20px; }
.chilli-play-header h3 { font-size: 16px; font-weight: 750; letter-spacing: 0; }
.chilli-play-mode { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--surface) 72%, #267746); color: var(--secondary); font-size: 10px; font-weight: 750; letter-spacing: 0; }
.chilli-play-score { min-height: 66px; padding: 10px 24px; gap: 20px; background: color-mix(in srgb, var(--surface) 94%, #315740); }
.chilli-play-score > span { gap: 10px; font-size: 13px; }
.chilli-play-score > span b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chilli-play-score .crest { width: 26px; height: 26px; }
.chilli-play-score strong { min-width: 88px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); text-align: center; font-size: 20px; }
.chilli-play-pitch {
	aspect-ratio: 1.78;
	min-height: 260px;
	max-height: 620px;
	border: 1px solid #ffffff25;
	background:
		repeating-linear-gradient(90deg, #ffffff0b 0 10%, #ffffff00 10% 20%),
		radial-gradient(ellipse at 50% 45%, #2c7950 0%, #226542 72%, #194d34 100%);
	box-shadow: inset 0 0 70px #05271945;
}
.chilli-play-field { color: #e0f2df9c; filter: drop-shadow(0 1px 1px #153b2a80); }
.chilli-play-trace path { stroke: #fff2a8; stroke-width: 2.5; stroke-dasharray: 7 6; filter: drop-shadow(0 1px 3px #0008); }
.chilli-play-ball { z-index: 5; font-size: 25px; filter: drop-shadow(0 3px 5px #001d12b3); }
.chilli-play-directions { top: 12px; color: #f2fff0d9; font-size: 10px; }
.chilli-play-directions > span { padding: 5px 9px; border: 1px solid #ffffff30; border-radius: 999px; background: #10291dbb; }
.chilli-play-callout { max-width: min(360px, 82%); width: max-content; gap: 5px; padding: 12px 16px; border-color: #ffffff36; border-radius: 10px; background: #101b16e8; box-shadow: 0 10px 32px #00180f55; }
.chilli-play-callout.has-location { top: 54px; bottom: auto; left: 50%; transform: translateX(-50%); padding: 8px 14px; }
.chilli-play-callout strong { font-size: 15px; }
.chilli-play-callout.has-location strong { font-size: 13px; }
.chilli-play-callout > span:not(.cp-symbol), .chilli-play-callout time { font-size: 11px; }
.chilli-play-location { color: #e9f2e7c7; }
.chilli-play-description { min-width: 0; min-height: 54px; padding: 12px 18px; font-size: 13px; line-height: 1.5; }
.chilli-play-controls { min-width: 0; padding: 12px 16px; gap: 8px; }
.chilli-play-controls button { min-width: 36px; min-height: 36px; border-radius: 8px; background: color-mix(in srgb, var(--surface) 88%, #315740); }
.chilli-play-controls [data-cp-play] { border-color: var(--accent); background: var(--accent); color: #fff; }
.chilli-play-controls .cp-latest { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); color: var(--accent); }
.chilli-play-controls input { accent-color: var(--accent); }
.chilli-play-feed-head { min-width: 0; min-height: 46px; padding: 12px 16px; border-top: 1px solid var(--border); font-weight: 700; }
.chilli-play-feed-head > span { font-size: 10px; font-weight: 500; }
.chilli-play-feed { box-sizing: border-box; width: 100%; min-width: 0; max-height: 360px; padding: 0 8px 8px; }
.chilli-play-feed li { min-width: 0; width: 100%; }
.chilli-play-feed li:not(:has(> button)) { padding: 14px 12px; color: var(--secondary); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.chilli-play-feed li > button { grid-template-columns: 48px 24px minmax(0, 1fr); min-width: 0; padding: 10px 12px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.chilli-play-feed button[aria-current=true] { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); box-shadow: inset 3px 0 var(--accent); }
.chilli-play-feed b, .chilli-play-feed small { min-width: 0; overflow-wrap: anywhere; }
.chilli-play-feed time { font-size: 11px; }
.chilli-play-note { padding: 10px 16px; border-top: 1px solid var(--border); font-size: 10px; line-height: 1.5; }
.chilli-play button:focus-visible, .chilli-play input:focus-visible { outline-color: var(--accent); }
.cp-formation-player { position:absolute;left:var(--cp-x);top:var(--cp-y);z-index:2;display:grid;place-items:center;width:clamp(22px,2.5vw,34px);aspect-ratio:1;transform:translate(-50%,-50%);border:1.5px solid #f5fff8;border-radius:50%;color:#111;background:var(--home);box-shadow:0 2px 7px #001b11a6;font-variant-numeric:tabular-nums; }
.cp-formation-player.cp-away { background:var(--away); }
.cp-formation-player b { font-size:10px;line-height:1;font-weight:750; }
.cp-formation-player.is-event-player { z-index:6;width:clamp(30px,3.2vw,42px);border:2px solid #effff4;box-shadow:0 0 0 4px #d9ffe380,0 0 22px #dbffe5b8,0 3px 10px #00180f99; }
.cp-formation-player.is-event-player small { position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);width:max-content;max-width:150px;padding:4px 7px;border:1px solid #ffffff32;border-radius:5px;background:#102019ef;color:#fff;font-size:10px;line-height:1.2;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.cp-formation-note { position:absolute;left:12px;bottom:27px;z-index:3;padding:4px 7px;border:1px solid #ffffff2e;border-radius:4px;background:#0d2419c9;color:#e2f3e1d9;font-size:8px;font-weight:700;letter-spacing:.3px; }
.chilli-play-pitch:has(.cp-formation-player) .chilli-play-callout:not(.has-location) { display:none; }
.chilli-play-callout.has-location { left:12px;top:48px;transform:none;max-width:min(270px,calc(100% - 24px)); }

.chilli-play:fullscreen, .chilli-play.is-expanded {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
	grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
	align-content: stretch;
	box-sizing: border-box;
	width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	overflow: hidden;
	border: 0;
	border-radius: 0;
	background: radial-gradient(ellipse at 30% 35%, #19221d, #111613 70%);
}
:root[data-theme="light"] .chilli-play:fullscreen,
:root[data-theme="light"] .chilli-play.is-expanded { background: var(--surface); }
.chilli-play:fullscreen .chilli-play-header, .chilli-play.is-expanded .chilli-play-header { grid-column: 1 / -1; grid-row: 1; }
.chilli-play:fullscreen .chilli-play-score, .chilli-play.is-expanded .chilli-play-score { grid-column: 1 / -1; grid-row: 2; }
.chilli-play:fullscreen .chilli-play-pitch, .chilli-play.is-expanded .chilli-play-pitch { grid-column: 1; grid-row: 3; align-self: stretch; width: 100%; height: 100%; min-height: 0; max-height: none; margin: 0; aspect-ratio: auto; }
.chilli-play:fullscreen .chilli-play-description, .chilli-play.is-expanded .chilli-play-description { grid-column: 1; grid-row: 4; align-self: center; }
.chilli-play:fullscreen .chilli-play-controls, .chilli-play.is-expanded .chilli-play-controls { grid-column: 1; grid-row: 5; }
.chilli-play:fullscreen .chilli-play-feed-head, .chilli-play.is-expanded .chilli-play-feed-head { grid-column: 2; grid-row: 3; z-index: 2; align-self: start; min-height: 48px; border-top: 0; border-left: 1px solid var(--border); background: var(--surface); }
.chilli-play:fullscreen .chilli-play-feed, .chilli-play.is-expanded .chilli-play-feed { grid-column: 2; grid-row: 3; align-self: stretch; height: 100%; max-height: none; padding: 52px 8px 12px; border-left: 1px solid var(--border); background: var(--surface); }
.chilli-play:fullscreen .chilli-play-note, .chilli-play.is-expanded .chilli-play-note { grid-column: 1 / -1; grid-row: 6; }

@media (max-width: 760px) {
	.chilli-play-header, .chilli-play-score, .chilli-play-controls, .chilli-play-feed-head { padding-inline: 12px; }
	.chilli-play-score { gap: 8px; }
	.chilli-play-score > span { gap: 5px; font-size: 11px; }
	.chilli-play-score .crest { width: 21px; height: 21px; }
	.chilli-play-score strong { min-width: 64px; padding: 6px 7px; font-size: 17px; }
	.chilli-play-pitch { aspect-ratio: 1.35; min-height: 230px; }
	.chilli-play-directions { left: 8px; right: 8px; font-size: 9px; }
	.chilli-play-directions > span { padding: 4px 7px; }
	.chilli-play-callout.has-location { top: 48px; }
	.chilli-play-controls { gap: 6px; }
	.chilli-play-controls button { min-width: 34px; min-height: 34px; padding: 6px 9px; }
	.chilli-play-controls .cp-latest { margin-left: 0; }
	.chilli-play-controls input { flex-basis: 100%; order: 2; }
	.chilli-play:fullscreen, .chilli-play.is-expanded {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto minmax(220px, 1fr) auto auto auto minmax(120px, .65fr) auto;
		height: 100dvh;
		overflow: auto;
	}
	.chilli-play:fullscreen .chilli-play-pitch, .chilli-play.is-expanded .chilli-play-pitch { grid-column: 1; grid-row: 3; min-height: 220px; }
	.chilli-play:fullscreen .chilli-play-description, .chilli-play.is-expanded .chilli-play-description { grid-column: 1; grid-row: 4; }
	.chilli-play:fullscreen .chilli-play-controls, .chilli-play.is-expanded .chilli-play-controls { grid-column: 1; grid-row: 5; }
	.chilli-play:fullscreen .chilli-play-feed-head, .chilli-play.is-expanded .chilli-play-feed-head { grid-column: 1; grid-row: 6; border-left: 0; }
	.chilli-play:fullscreen .chilli-play-feed, .chilli-play.is-expanded .chilli-play-feed { grid-column: 1; grid-row: 7; height: auto; padding: 0 8px 8px; border-left: 0; }
	.chilli-play:fullscreen .chilli-play-note, .chilli-play.is-expanded .chilli-play-note { grid-column: 1; grid-row: 8; }
}