/* PATIO 4 extends the existing visual language rather than replacing the game. */
:root{--team-0-base:#f18b70;--team-0-dark:#bd6452;--team-0-light:#ffd0a2;--team-0-rim:#523d31;--team-1-base:#90c9b0;--team-1-dark:#519880;--team-1-light:#d2edd0;--team-1-rim:#254c3e}
#lighting{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}#game{position:relative;z-index:0}.stage-top,.stage-right{z-index:1}.coral-text{color:var(--team-0-base)}.mint-text{color:var(--team-1-base)}.dot{background:var(--team-0-base)}.dot.mint{background:var(--team-1-base)}.possession-bar{background:var(--team-1-base)}.possession-bar i{background:var(--team-0-base)}.energy i{background:var(--energy-color,var(--team-0-base))}.result-score .coral-text{color:var(--team-0-rim)}.result-score .mint-text{color:var(--team-1-rim)}.coral-team{color:var(--team-0-rim)}.mint-team{color:var(--team-1-rim)}
.club-picker-button{display:flex;align-items:center;gap:10px;width:100%;padding:11px 0;margin:0 0 8px;background:transparent;color:var(--ink);border-top:1px solid #d7ddca;border-bottom:1px solid #d7ddca;text-align:left}.club-preview-side{display:flex;align-items:center;gap:7px;min-width:0}.club-preview-side strong{font-size:11px;font-weight:700}.club-crest{width:22px;height:25px;display:grid;place-items:center;clip-path:polygon(0 0,100% 0,100% 68%,50% 100%,0 68%);font-size:12px;font-weight:800;padding-bottom:3px;flex-shrink:0;background:var(--team-0-base)}.club-versus{font:8px var(--mono);color:#859280}.club-edit{display:flex;align-items:center;gap:2px;margin-left:auto;white-space:nowrap;font-size:9px;color:#708069}.club-edit svg{width:12px;height:12px}.club-picker-button:hover{background:#e8ecdf}.home-options{border-top:0;padding-top:8px}.clubs-panel{width:min(740px,100%);display:flex;flex-direction:column;overflow:hidden}.clubs-panel .subline{margin-bottom:16px;max-width:550px}.club-side-select{display:flex;gap:20px;border-bottom:1px solid #cdd7c1;margin-bottom:16px;flex-shrink:0}.club-side-select button{padding:7px 0 12px;background:none;color:#798a72;border-bottom:2px solid transparent;font-size:12px;font-weight:700}.club-side-select button[aria-pressed=true]{color:var(--ink);border-color:var(--ink)}.club-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;overflow-y:auto;min-height:100px;scrollbar-width:thin;padding:3px 3px 7px;overscroll-behavior:contain}.club-card{display:flex;flex-direction:column;align-items:center;min-height:126px;padding:8px 7px 10px;border:1px solid #d4dec8;border-radius:10px;background:#e9eddf;color:var(--ink);position:relative}.club-card canvas{display:block;width:66px;height:58px;flex-shrink:0}.club-card strong{font-size:12px}.club-card small{font-size:9px;line-height:1.5;color:#6b7e67;display:block;margin-top:4px;max-width:140px}.club-card:hover{border-color:var(--club-rim);background:#e2e8d7}.club-card.selected{border:2px solid var(--club-rim);padding:7px 6px 9px;background:#f4f2e6}.club-card.selected:after{content:'EN CAMPO';position:absolute;right:6px;top:7px;font:6px var(--mono);letter-spacing:.2px;color:var(--club-rim)}.clubs-panel>.primary{flex-shrink:0;margin-top:16px}.room-clubs{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:18px}.room-clubs label{font-size:10px;color:#6f8167}.room-clubs select{display:block;width:100%;margin-top:7px}
.graphics-settings{padding-top:14px;margin:14px 0 26px;border-top:1px solid #c7d3b8}.graphics-settings h3{font-size:16px;letter-spacing:-.3px;margin:12px 0 2px;font-weight:750}.graphics-status{font:9px var(--mono);line-height:1.7;color:#577351;padding:9px 12px;background:#e4ebd9;border-radius:5px;margin:0 0 7px;overflow-wrap:anywhere}.graphics-settings select{max-width:157px}.graphics-settings .form-row{padding:12px 0;gap:16px}.graphics-settings .form-row small{max-width:224px;font-size:10px}.slider-row{display:block;padding:12px 0;border-top:1px solid #d6dccb;font-size:12px}.slider-row>span{display:flex;justify-content:space-between;margin-bottom:13px}.slider-row output{font:10px var(--mono);color:#6e8165}.slider-row input{accent-color:#315e46;width:100%;margin:0;cursor:pointer}.slider-row small{font-size:9px;color:#7a8b70;display:block;line-height:1.6;margin-top:7px}.graphics-note{font-size:10px;line-height:1.75;color:#708267;margin:17px 0 9px}.graphics-reset{color:#4f6d4b;text-decoration:underline;text-underline-offset:3px;font-size:10px;background:none;padding:9px 0}.panel select:disabled{opacity:.5;cursor:not-allowed}#settingsModal>.panel{width:min(520px,100%)}
@media(min-width:1100px) and (min-height:700px){.home-panel h1{font-size:42px}.home-description{font-size:12px}.home-panel{width:390px;padding:24px 28px}.home-secondary .secondary{padding:10px 14px}.home-extra .secondary{min-height:48px}.home-footnote{margin-top:10px!important}.menu-xp{padding-top:11px}}
@media(max-width:760px){.club-grid{grid-template-columns:repeat(3,1fr);gap:7px}.clubs-panel{padding:24px 20px}.club-card{min-height:117px}.club-card small{font-size:8px}.club-card strong{font-size:11px}.club-card.selected:after{font-size:5px}.club-picker-button{gap:8px}.club-edit{font-size:8px}.club-preview-side strong{font-size:10px}.graphics-settings select{max-width:138px}.graphics-settings .form-row{font-size:11px}.graphics-settings .form-row small{font-size:9px}}
@media(max-height:680px) and (min-width:761px){.club-picker-button{grid-column:1;grid-row:4;margin:2px 0;padding:9px 0}.home-extra{grid-row:5}.home-panel .menu-xp{grid-row:5}.home-panel .home-footnote{grid-row:6}.clubs-panel .club-grid{grid-template-columns:repeat(4,1fr)}.club-card{min-height:105px}.club-card canvas{width:55px;height:48px}.club-card small{font-size:8px}}
@media(max-height:500px) and (orientation:landscape){.club-picker-button{grid-column:1;grid-row:3;padding:5px 0;margin:0}.home-extra{grid-row:4}.home-panel .menu-xp{grid-column:2;grid-row:4}.home-panel .home-footnote{grid-column:1/-1;grid-row:5}.clubs-panel h2{font-size:26px}.clubs-panel .subline{font-size:10px;margin-bottom:7px}.club-side-select{margin-bottom:8px}.clubs-panel>.primary{padding:10px;margin-top:10px}.club-grid{grid-template-columns:repeat(4,1fr);gap:7px}.club-card{min-height:98px}.club-card canvas{width:50px;height:44px}.club-card small{font-size:8px}.club-picker-button .club-edit{display:none}}
@media(max-width:370px){.club-grid{grid-template-columns:repeat(2,1fr)}.club-edit{font-size:7px}.club-crest{width:18px;height:22px}}
.roster-slot.team0 .seat-avatar{background:var(--team-0-base);color:var(--team-0-rim)}.roster-slot.team1 .seat-avatar{background:var(--team-1-base);color:var(--team-1-rim)}.roster-slot.team0.own{border-color:var(--team-0-dark)}.roster-slot.team1.own{border-color:var(--team-1-dark)}
.portrait:has(#livePortrait):before,.portrait:has(#livePortrait):after{display:none}#livePortrait{width:100%;height:100%;display:block;border-radius:50%}.portrait:has(#livePortrait){background:transparent!important;border:0;box-shadow:none}
@media(max-width:760px) and (orientation:portrait){.home-panel h1{font-size:36px}.home-panel .home-description{margin-bottom:10px;font-size:10px}.home-panel .format-line{margin-bottom:10px}.home-panel .home-options{padding-top:4px;margin-bottom:10px}.home-panel .club-picker-button{padding-top:8px;padding-bottom:8px}.home-panel .home-secondary .secondary{padding-top:10px;padding-bottom:10px}}