:root{color-scheme:dark;--green:#327846;--line:#494c45;--cream:#eef2dc}*{box-sizing:border-box}body{margin:0;background:#22251f;color:var(--cream);font-family:Arial,sans-serif}main{max-width:850px;margin:20px auto;padding:0 25px}header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}h1{font-size:29px;margin:0;color:white;text-shadow:2px 2px #101c0c}h1 span{color:#bbda70}h2{font-size:23px}h3{margin-top:0}.sub{color:#b8c4a7;margin:5px 0 0;font-size:14px}button,select{font:inherit;border:1px solid #6a7461;border-radius:7px;padding:9px 13px;background:#353c2e;color:var(--cream)}button{cursor:pointer}button:hover{background:#4a573f}button:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid #dbeaa7;outline-offset:3px}button:disabled{opacity:.5;cursor:default}.primary,button[aria-pressed=true]{background:var(--green);border-color:#9fc686}nav,.actions,.round-tabs{display:flex;gap:7px;flex-wrap:wrap}.options{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:15px 0;border-bottom:1px solid var(--line);margin-top:12px}label{display:flex;align-items:center;gap:8px}.options span{font-size:12px;color:#bdc6b4;flex:1;min-width:150px}p{line-height:1.5;font-size:14px}.muted{color:#bac1b2;font-size:13px}#status{min-height:20px}.section-title{display:flex;align-items:center;justify-content:space-between}.box{border:1px solid #75865e;background:#2d3827;padding:18px;border-radius:9px;margin:15px 0}.round-tabs{margin:16px 0}.round-tabs button{font-size:12px;padding:8px 10px}.results-table{width:100%;border-collapse:collapse;font-size:13px;margin:14px 0}.results-table th{text-align:left;color:#cfdfb1;font-size:12px}.results-table td,.results-table th{padding:10px 7px;border-bottom:1px solid var(--line)}.results-table tr.mine{background:#354d2e}.team-pair{display:flex;align-items:center;gap:8px;margin:3px 0}.team-pair img{height:28px;width:28px;object-fit:contain;image-rendering:pixelated}.winner{color:#b9e594}.actions{align-items:center;margin:18px 0}.match-banner{border-left:4px solid #a2c660;padding:9px 13px;background:#303c29;font-weight:bold;font-size:15px}#game{width:800px;max-width:100%;height:540px;background:#1d201a}.controls{font-size:13px;color:#c8d3bc;margin-top:12px}#penaltyCanvas{width:100%;height:auto;display:block;cursor:crosshair;border-radius:6px}footer{font-size:12px;color:#a8b39c;line-height:1.6;border-top:1px solid var(--line);margin:24px 0;padding-top:16px}[hidden]{display:none!important}.champion{font-size:27px;color:#dbe79f;font-weight:bold}.badge{display:inline-block;font-size:12px;border:1px solid #8b9d76;border-radius:12px;padding:3px 8px;margin-left:6px}#cupResults{overflow-x:auto}.score{white-space:nowrap;font-variant-numeric:tabular-nums}#penaltyMessage{font-weight:bold;color:#e9dc8a}@media(max-width:650px){main{padding:0 12px}.results-table{font-size:12px}.results-table td{padding:8px 4px}h1{font-size:24px}#game{height:65vw}}

.play-layout{display:flex;gap:18px;align-items:flex-start}#game{flex-shrink:0}#liveTable{min-width:230px;width:230px;background:#282e22;padding:10px;border:1px solid var(--line);border-radius:8px}#liveTable summary{cursor:pointer;font-size:14px}#liveTable .results-table{font-size:12px}#liveTable td,#liveTable th{padding:4px}#livePosition{color:#dbe79f;font-weight:bold}.history{margin-top:20px;padding:12px;border:1px solid var(--line);border-radius:7px}.history summary{cursor:pointer}
@media(min-width:1180px){main{max-width:1120px}#liveTable{max-height:540px;overflow-y:auto}}
@media(max-width:1179px){.play-layout{flex-wrap:wrap}#liveTable{width:100%;min-width:0}#liveRows{max-height:260px;overflow:auto}main{max-width:850px}}


#liveSummaryPosition{color:#dbe79f;font-size:12px;white-space:nowrap}

/* Interactive penalty shootouts */
#penaltyPanel{max-width:800px;margin:auto}#penaltyCanvas{touch-action:none;border:1px solid #728367}#penaltyAttempts{display:flex;gap:18px;justify-content:space-between;flex-wrap:wrap;margin:12px 0}.penalty-attempt-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.penalty-attempt-row b{font-size:13px;margin-right:6px}.penalty-dot{width:23px;height:23px;text-align:center;border:1px solid #728367;border-radius:50%;font-weight:bold;line-height:21px}.penalty-dot.scored{background:#397b48;color:#dff9ab}.penalty-dot.missed{background:#713b31;color:#ffd1ad}.penalty-dot.pending{color:#91a18b}.penalty-instruction{min-height:42px;font-weight:bold;color:#e6edce}.penalty-power{display:flex;align-items:center;gap:16px;margin:14px 0}.penalty-power-track{position:relative;height:22px;flex:1;max-width:500px;background:#19251d;border:1px solid #83916b;border-radius:5px;overflow:hidden}.penalty-power-sweet{position:absolute;left:55%;width:20%;height:100%;background:#72ae54}.penalty-power-fill{position:absolute;left:0;top:6px;height:8px;background:#fff4bd;box-shadow:1px 0 4px #000}.penalty-power output{font-size:13px;min-width:155px}.penalty-help{font-size:13px;padding:12px;background:#2c3528;border-radius:6px}.penalty-help summary{cursor:pointer}#penaltyMessage{min-height:24px}#penaltyAction{min-width:180px;min-height:46px}@media(max-width:600px){.penalty-power{flex-wrap:wrap}.penalty-power-track{flex-basis:100%}#penaltyAttempts{gap:10px}.penalty-dot{width:21px;height:21px;line-height:19px}.penalty-attempt-row{gap:5px}.penalty-instruction{font-size:13px}}

/* Menu soundtrack controls */
.music-options{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}.music-options input{width:110px;accent-color:#a4cd74}.music-options input:focus-visible{outline:3px solid #dbeaa7;outline-offset:3px}.music-options #musicState{color:#cfdfb1}.music-options .muted{font-size:12px}

.goal-options{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:11px 0;border-bottom:1px solid var(--line);font-size:13px}.goal-options input{accent-color:#a4cd74}.goal-options input[type=range]{width:110px}.goal-options input:focus-visible{outline:3px solid #dbeaa7;outline-offset:3px}

.penalty-power-sweet{left:60%;width:10%}

.league-results{margin:12px 0 20px}.league-results summary{font-weight:bold}.league-round-controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:15px}.league-round-controls button,.league-round-controls select{font-size:13px}.league-round-table{overflow-x:auto}.league-round-table .results-table{min-width:460px}.league-round-table td:last-child{font-size:12px}.league-results [data-role=warning]{font-size:12px}

.friendly-options{display:flex;gap:16px;flex-wrap:wrap;margin:18px 0}.friendly-options label{flex-wrap:wrap}.friendly-options select{max-width:100%}
.title-celebration{position:fixed;inset:0;z-index:9999;pointer-events:none}.title-celebration canvas{position:absolute;inset:0;width:100%;height:100%}.title-celebration-banner{position:absolute;left:50%;top:12%;transform:translateX(-50%);display:flex;align-items:center;flex-direction:column;gap:15px;padding:22px 32px;border:1px solid #ffe9a6;background:#14291eee;color:#fff1aa;border-radius:14px;box-shadow:0 8px 30px #0006;max-width:90%;text-align:center}.title-celebration-banner strong{font:700 30px Arial}.title-celebration-banner button{pointer-events:auto;color:#fff;background:#365638}
