*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:16px}body[data-theme=light]{--bg:#edf2ee;--surface:#fff;--surface-2:#e4ebe5;--fg:#15291c;--muted:#4b6152;--border:#809387;--border-soft:#ccd7ce}button,input,select{font:inherit}button{min-height:44px;padding:10px 16px;border:1px solid var(--border);border-radius:12px;color:var(--fg);background:var(--surface-2);cursor:pointer;font-weight:700}button:hover{border-color:#f5c400}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #00a8be;outline-offset:3px}.primary,button.active{background:#f5c400;color:#182015;border-color:#f5c400}.danger{color:var(--danger)}header{padding:22px max(20px,calc((100vw - 1280px)/2));display:flex;justify-content:space-between;align-items:center;background:var(--surface);gap:16px}h1{font-size:clamp(20px,3vw,32px);margin:4px 0;font-weight:850}h1 span{color:#d0a900}h2{margin:8px 0 16px;font-size:24px}h3{font-size:18px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:800;color:var(--muted)}.head-actions,.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.badge{font-size:12px;border:1px solid var(--border);padding:8px 12px;border-radius:30px;white-space:nowrap}nav{display:flex;justify-content:center;background:var(--surface);border-bottom:1px solid var(--border-soft);position:sticky;top:0;z-index:10;padding:10px;gap:8px}nav button{min-width:120px}main{max-width:1280px;margin:auto;padding:20px}#notice{padding:12px 16px;background:var(--surface-2);border-left:3px solid #f5c400;border-radius:8px;margin-bottom:22px;font-size:14px}.section-head{display:flex;justify-content:space-between;align-items:center;gap:16px}.roster{display:flex;overflow-x:auto;gap:10px;padding:10px 0 24px}.roster button{flex:0 0 88px;padding:6px}.roster canvas{width:48px;height:80px;display:block;margin:auto}.roster small{display:block;overflow:hidden;text-overflow:ellipsis;max-width:75px}.editor{display:grid;grid-template-columns:340px 1fr;gap:20px;align-items:start}.panel{background:var(--surface);border:1px solid var(--border-soft);border-radius:24px;padding:24px;margin-bottom:20px}.preview{position:sticky;top:90px}.figure-stage{background:radial-gradient(ellipse at center,var(--surface-2),transparent 70%);display:flex;justify-content:center;padding:20px 0}.figure-stage canvas{width:240px;height:400px;max-width:100%;object-fit:contain}.muted{color:var(--muted)}.small{font-size:12px}.fields{display:flex;gap:14px;flex-wrap:wrap;align-items:end;margin-bottom:18px}.fields label{flex:1;min-width:100px}label{display:block;font-size:13px;font-weight:700}input:not([type=checkbox]),select{display:block;width:100%;min-height:44px;background:var(--surface-2);color:var(--fg);border:1px solid var(--border);border-radius:9px;padding:10px;margin-top:7px}input[type=color]{padding:4px;height:44px}input[type=checkbox]{width:20px;height:20px;vertical-align:middle}.control-label{margin:18px 0 10px}.choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(85px,1fr));gap:8px}.choices button{padding:8px 4px;font-size:11px}.choices canvas{width:64px;height:64px;object-fit:contain;display:block;margin:auto}.choices button[aria-pressed=true]{outline:3px solid #f5c400;outline-offset:-3px;background:var(--surface-2)}.swatches{display:flex;gap:10px;flex-wrap:wrap}.swatches button{width:44px;padding:4px;border:2px solid var(--border);border-radius:50%}.swatches button[aria-pressed=true]{outline:3px solid #f5c400;outline-offset:3px}.swatches span{display:block;width:30px;height:30px;border-radius:50%}.formation-bar{display:flex;gap:10px;flex-wrap:wrap}.pitch-layout{display:grid;grid-template-columns:minmax(320px,650px) 1fr;gap:24px;align-items:start}.pitch{position:relative;aspect-ratio:3/4;border:3px solid #e7f5e6;border-radius:16px;overflow:hidden;background:repeating-linear-gradient(0deg,#246b3c 0%,#246b3c 10%,#2b7744 10%,#2b7744 20%);touch-action:none}.midline{position:absolute;top:50%;left:5%;width:90%;border-top:2px solid #c8e6cd}.center-circle{position:absolute;left:37%;top:40.25%;width:26%;aspect-ratio:1;border:2px solid #c8e6cd;border-radius:50%}.area{position:absolute;left:22%;width:56%;height:17%;border:2px solid #c8e6cd}.area.top{top:0;border-top:0}.area.bottom{bottom:0;border-bottom:0}.goal{position:absolute;left:39%;width:22%;height:4%;border:2px solid #fff}.goal.top{top:0}.goal.bottom{bottom:0}.pitch-player{position:absolute;width:12%;padding:0;border:0;background:transparent;transform:translate(-50%,-50%);transition:left 600ms cubic-bezier(.2,.8,.2,1),top 600ms cubic-bezier(.2,.8,.2,1);touch-action:none;user-select:none;z-index:2;min-height:44px}.pitch-player:hover{background:rgba(0,0,0,.15)}.pitch-player canvas{width:100%;height:auto;display:block;pointer-events:none}.pitch-player small{display:block;color:white;background:#102d20e8;font-size:clamp(8px,1vw,12px);border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:2px}.pitch-player.selected{filter:drop-shadow(0 0 4px #ffe767)}.pitch-player.dragging{transition:none;z-index:3;cursor:grabbing}.pitch-player:focus-visible{outline:3px solid #00a8be;outline-offset:2px;z-index:3}.bench button.selected{outline:3px solid #f5c400;outline-offset:-3px}.bench{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.bench canvas{width:44px;height:74px;display:block;margin:auto}.saved{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}.team-heads{display:flex;overflow:hidden}.team-heads canvas{width:36px;height:60px;margin-right:-5px}footer{text-align:center;color:var(--muted);font-size:12px;padding:24px}[hidden]{display:none!important}@media(max-width:800px){.editor,.pitch-layout{grid-template-columns:1fr}.preview{position:static}.preview .figure-stage canvas{width:180px;height:300px}.panel{padding:18px}header{padding:16px;align-items:start}.head-actions{flex-direction:column;align-items:end}nav button{min-width:0;flex:1}main{padding:12px}.pitch-player small{font-size:9px}.bench{grid-template-columns:repeat(6,1fr)}.bench button{padding:4px}.section-head h2{font-size:20px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

#shirts{grid-template-columns:repeat(auto-fill,minmax(145px,1fr))}#shirts .club-card{display:grid;grid-template-columns:minmax(0,1fr) 64px;align-items:center;gap:4px;padding:10px 8px}#shirts .club-shirt{width:100%;height:90px;object-fit:contain;margin:0}#shirts .club-crest{width:64px;height:74px;object-fit:contain;margin:0}#shirts .club-name{grid-column:1/-1;min-height:32px;font-size:12px;line-height:1.3;text-align:center}#shirtColorChoices{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* Compact native color controls; clothing swatches keep their existing shape. */
input[type=color]{width:44px;max-width:44px;min-width:44px;height:44px;flex:0 0 44px;padding:3px;border-radius:10px;cursor:pointer}
input[type=color]::-webkit-color-swatch-wrapper{padding:0}
input[type=color]::-webkit-color-swatch{border:1px solid var(--border);border-radius:6px}
input[type=color]::-moz-color-swatch{border:1px solid var(--border);border-radius:6px}
#gloveColorChoices{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0}
#gloveColorChoices button{width:44px;height:44px;min-width:44px;flex:0 0 44px;padding:0;border:2px solid var(--border);border-radius:8px;box-shadow:inset 0 0 0 1px #ffffff40}
#gloveColorChoices button[aria-pressed=true]{outline:3px solid #f5c400;outline-offset:3px}

.equipment-color{margin:12px 0}.equipment-color-actions{margin:14px 0}
/* Importación de equipos y editor de camisetas */
.kit-warning{padding:12px 16px;background:var(--surface-2);border-left:3px solid #d61d2e;border-radius:8px;margin-bottom:22px}.kit-warning button{margin-left:8px}
#importPanel textarea{width:100%;font-family:ui-monospace,monospace;font-size:12px}.import-preview ul{padding-left:18px}.import-error,.import-errors li{color:#d61d2e}.import-warnings li{color:var(--muted)}
.design-previews{display:grid;grid-template-columns:1fr 1fr;gap:8px}.design-previews figure{margin:0;text-align:center}#designPatterns button small{display:block;color:var(--muted)}#designPatterns button:disabled{opacity:.45}

/* Modalidades de cancha, titulares/suplentes y plantel por ligas */
.pitch-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.pitch-lines *{fill:none;stroke:#c8e6cd;stroke-width:.45}
.pitch-lines .ln-dot{fill:#c8e6cd;stroke:none}.pitch-lines .ln-goal{stroke:#fff;stroke-width:.9}.pitch-lines .ln-dashed{stroke-dasharray:2 1.4}.pitch-lines .ln-faint{opacity:.55}.pitch-lines .ln-tape{stroke:#1f5fbf;stroke-width:.8}
.pitch-lines .ln-flag-red{fill:#d61d2e;stroke:none}.pitch-lines .ln-flag-yellow{fill:#f4cf00;stroke:none}
.pitch[data-type=futbol5]{background:repeating-linear-gradient(90deg,#2a7d43 0 12.5%,#2f8a4a 12.5% 25%)}
.pitch[data-type=sala]{background:#3d6fa3}.pitch[data-type=sala] .pitch-lines *{stroke:#f4f7fb}.pitch[data-type=sala] .pitch-lines .ln-dot{fill:#f4f7fb}
.pitch[data-type=arena]{background:radial-gradient(circle at 30% 20%,#ead29e,#dcbd82 70%);border-color:#1f5fbf}.pitch[data-type=arena] .pitch-lines *{stroke:#6b5530}.pitch[data-type=arena] .pitch-lines .ln-tape{stroke:#1f5fbf}
.pitch-type select{margin-left:6px}
.lineup-zone h2{font-size:16px;margin:10px 0 6px}.lineup .lineup-item{touch-action:none}.lineup-item.dragging{position:relative;z-index:5;opacity:.85;cursor:grabbing}
.swap-source{outline:3px dashed #00a8be!important;outline-offset:-3px}
#selectedPitch label{display:block;margin-top:8px}
.roster[data-view=league]{align-items:flex-start}.roster-group{display:flex;flex-direction:column;gap:4px;padding-right:10px;border-right:1px solid var(--border-soft)}.roster-group h3{font-size:12px;margin:0;white-space:nowrap}.roster-group-items{display:flex;gap:10px}

/* Selectores integrados con los controles del taller. */
select{appearance:none;-webkit-appearance:none;min-height:46px;border:1px solid var(--border);border-radius:12px;padding:11px 42px 11px 14px;color:var(--fg);background-color:var(--surface-2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23f5c400' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;font-weight:600;line-height:1.3;cursor:pointer;box-shadow:0 2px 0 rgba(0,0,0,.08);transition:border-color .15s,box-shadow .15s}
select:hover{border-color:#f5c400}select:focus-visible{border-color:#00a8be;box-shadow:0 0 0 3px #00a8be26;outline:2px solid #00a8be;outline-offset:2px}select:disabled{opacity:.5;cursor:not-allowed}select option,select optgroup{background:var(--surface);color:var(--fg);font-weight:500}body[data-theme=light] select{background-color:var(--surface);box-shadow:0 2px 0 #15291c0c;color:var(--fg)}
@media(prefers-reduced-motion:reduce){select{transition:none}}
/* Cancha: controles que se adaptan al ancho real disponible. */
#cancha .section-head{flex-wrap:wrap;align-items:flex-start}#cancha .section-head>.actions{flex-wrap:wrap;min-width:0;max-width:100%;gap:10px}#cancha .pitch-type{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 260px}#cancha .pitch-type select{margin:0;width:100%;min-width:0;max-width:100%}#cancha .section-head>.actions>button{flex:1 1 160px;white-space:normal}#cancha .formation-bar{flex-wrap:wrap;gap:8px}#cancha .pitch-layout>*{min-width:0}#cancha select{max-width:100%;min-width:0}#cancha .pitch{width:100%;min-width:0}#selectedPitch .actions{flex-wrap:wrap}#selectedPitch .actions button{white-space:normal;flex:1 1 130px}#selectedPitch select{width:100%}
@media(max-width:800px){#cancha .section-head>.actions{width:100%;display:grid;grid-template-columns:1fr 1fr}#cancha .pitch-type{grid-column:1/-1}#cancha .section-head>.actions>button{width:100%;padding:10px;min-height:48px}#cancha .formation-bar button{flex:1 1 90px;min-height:46px}#cancha .pitch-layout{grid-template-columns:minmax(0,1fr)}#cancha .bench{grid-template-columns:repeat(auto-fit,minmax(60px,1fr))}#cancha .panel{min-width:0}}
@media(max-width:380px){#cancha .section-head>.actions{grid-template-columns:1fr}#cancha .section-head>.actions>button{grid-column:1}}
.saved-design-card .club-shirt{grid-column:1/-1}.saved-design-card small{grid-column:1/-1;color:var(--muted)}
@media(max-width:480px){nav{gap:6px;padding:10px}nav button{padding:10px 6px;font-size:13px;min-width:0}#cancha .section-head{gap:14px}}
.shirt-league-heading{grid-column:1/-1;margin:18px 0 4px;font-size:15px;color:var(--fg);border-bottom:1px solid var(--border-soft);padding-bottom:8px}.shirt-league-heading:first-child{margin-top:0}
@font-face{font-family:'Cantera Icons';src:url('assets/fonts/ct-icons.woff2') format('woff2');font-weight:100 700;font-style:normal;font-display:block}.ct-icon{font-family:'Cantera Icons';font-weight:400;font-style:normal;font-size:20px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';font-feature-settings:'liga';-webkit-font-smoothing:antialiased;vertical-align:middle;margin-right:5px}
#theme .ct-icon,#selectedPitch button .ct-icon{margin-left:6px;margin-right:0}
/* Menús del taller: desplegables propios, también al abrirlos. */
.ct-select{display:block;position:relative;min-width:0;width:100%}.ct-select-native{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%)!important;opacity:0;pointer-events:none}.ct-select-button{position:relative;width:100%;min-height:46px;text-align:left;padding:11px 42px 11px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);color:var(--fg);font:inherit;font-weight:600;white-space:normal}.ct-select-button:after{content:'';position:absolute;right:16px;top:50%;width:9px;height:9px;border-right:3px solid #f5c400;border-bottom:3px solid #f5c400;transform:translateY(-70%) rotate(45deg);pointer-events:none}.ct-select-button:hover,.ct-select-button[aria-expanded=true]{border-color:#f5c400}.ct-select-button:focus-visible{outline:2px solid #00a8be;outline-offset:2px}.ct-select-button:disabled{opacity:.5;cursor:not-allowed}.ct-select-menu{position:fixed;z-index:10000;overflow-y:auto;overscroll-behavior:contain;border:1px solid #f5c400;border-radius:12px;background:var(--surface-2);color:var(--fg);padding:6px;box-shadow:0 14px 40px #0006;box-sizing:border-box}.ct-select-menu[hidden]{display:none}.ct-select-menu [role=option]{padding:11px 12px;min-height:44px;box-sizing:border-box;border-radius:8px;cursor:pointer;word-break:break-word}.ct-select-menu [aria-selected=true]{color:#17191d;background:#f5c400;font-weight:700}.ct-select-menu [role=option].active{outline:2px solid #00a8be;outline-offset:-2px}.ct-select-menu [role=option]:hover:not([aria-disabled=true]){background:#f5c40022}.ct-select-menu [aria-disabled=true]{opacity:.4;cursor:not-allowed}#cancha .pitch-type .ct-select{margin:0;width:100%}

.gesture-picker{display:flex;flex-direction:column;align-items:center;gap:14px;margin:18px 0 24px}.gesture-picker .control-label{margin:0;align-self:flex-start}.gesture-controls{justify-content:center;flex-wrap:nowrap;width:100%}.gesture-controls #gestureNumber{min-width:110px;text-align:center;font-weight:700}.gesture-picker #heads{display:flex;justify-content:center;width:100%}.gesture-picker #heads canvas{width:96px;height:96px;object-fit:contain;margin:auto}

.gesture-picker{display:grid;grid-template-columns:minmax(0,1fr) 100px;align-items:center;gap:12px}.gesture-picker>.control-label{grid-column:1/-1}.gesture-picker #heads{width:100px}.head-card{width:100px;padding:8px 4px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);text-align:center;font-size:11px;font-weight:700}.gesture-picker #heads canvas{width:80px;height:80px}.head-card span{display:block;margin-top:4px}.gesture-controls{gap:8px}.gesture-controls button{padding:10px 12px}.gesture-controls #gestureNumber{min-width:0;font-size:14px}@media(max-width:380px){.gesture-picker{grid-template-columns:minmax(0,1fr) 88px;gap:8px}.gesture-picker #heads,.head-card{width:88px}.gesture-controls{gap:5px}.gesture-controls button{padding:8px}.gesture-controls #gestureNumber{font-size:12px}}

#boots{margin:8px 0 28px}#goalkeeper{margin-top:24px;padding-top:20px;border-top:1px solid var(--border-soft)}#goalkeeper h3{margin:0 0 14px}#goalkeeper>label{margin-bottom:18px;display:flex;gap:10px;align-items:center}#goalkeeper input[type=checkbox]{margin:0}.glove-palette{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}.glove-palette #gloveColorChoices{display:flex;gap:10px;flex-wrap:wrap;margin:0}.glove-custom{position:relative;margin:0;padding:0}.glove-custom span{position:absolute;top:52px;left:50%;transform:translateX(-50%);font-size:10px;white-space:nowrap}.glove-custom input[type=color]{width:44px;height:44px;min-height:44px;margin:0;border-radius:10px}.glove-palette{padding-bottom:18px}

#shirtColorChoices,.swatches,#shorts,#socks,#boots,#gloveColorChoices{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:4px 0;margin-bottom:18px}#shirtColorChoices button,.swatches button,#shorts button,#socks button,#boots button,#gloveColorChoices button{flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:4px;border:2px solid var(--border);border-radius:10px;background:var(--surface-2)}#shirtColorChoices button span,.swatches button span,#shorts button span,#socks button span,#boots button span,#gloveColorChoices button span{display:block;width:32px;height:32px;border-radius:6px}#shirtColorChoices button[aria-pressed=true],.swatches button[aria-pressed=true],#gloveColorChoices button[aria-pressed=true]{outline:3px solid #f5c400;outline-offset:3px}input[type=color]{width:44px!important;height:44px!important;min-height:44px!important;border:2px solid var(--border);border-radius:10px;padding:4px}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:0;border-radius:6px}#goalkeeper .glove-palette #gloveColorChoices{padding:0;margin:0}#boots{margin-bottom:28px}

.equipment-design{min-width:0;margin:0 0 18px;padding:18px;border:1px solid var(--border-soft);border-radius:16px;background:var(--surface-2)}.equipment-design legend{padding:0 8px;font-size:16px;font-weight:700}.equipment-design .fields{margin:16px 0 0}.equipment-design input[type=checkbox]{accent-color:#f5c400}input[type=checkbox]{accent-color:#f5c400}

#shirtColorChoices button,.swatches button,#shorts button,#socks button,#boots button,#gloveColorChoices button{border-radius:50%}#shirtColorChoices button span,.swatches button span,#shorts button span,#socks button span,#boots button span,#gloveColorChoices button span{border-radius:50%}input[type=color]{border-radius:10px}input[type=color]::-webkit-color-swatch{border-radius:6px}

.head-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px}#theme{width:44px;height:44px;padding:10px;display:grid;place-items:center}#theme .ct-icon{margin:0}.nav-icon{display:none}@media(max-width:600px){nav .nav-label{display:none}nav .nav-icon{display:inline-block;font-size:24px}nav button{min-height:48px;display:grid;place-items:center}header{display:grid;grid-template-columns:1fr 44px;align-items:center;gap:10px}.head-actions{display:contents}#theme{grid-column:2;grid-row:1}#count{grid-column:1/-1;grid-row:2;justify-self:start;font-size:12px}}

@media(max-width:600px),(min-width:601px) and (max-width:1100px) and (orientation:landscape){body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}nav{position:fixed;top:auto;bottom:0;left:0;right:0;z-index:100;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border-soft);border-bottom:0;box-shadow:0 -4px 18px #0001;gap:8px}nav button{min-width:0;flex:1;min-height:52px;display:flex;align-items:center;justify-content:center;gap:8px}nav .nav-icon{display:inline-block;font-size:24px}.preview{top:16px}}

body{min-height:100vh;min-height:100dvh}.install-app{display:block;margin:16px auto}@media(display-mode:standalone){body{padding-top:env(safe-area-inset-top,0px)}.install-app{display:none}}

@media(min-width:601px){.head-actions{display:flex;flex-direction:row;align-items:center;gap:12px}#count{order:0}#theme{order:1}}

nav{background:transparent;border:0;box-shadow:none}nav button,nav button:hover,nav button.active{background:transparent;border:0;border-radius:0;box-shadow:none;color:var(--muted)}nav button.active{color:#bd9400}body[data-theme=dark] nav button.active{color:#f5c400}nav button:focus-visible{outline:0;color:var(--fg);text-decoration:underline;text-underline-offset:6px}nav button:focus-visible .ct-icon{filter:drop-shadow(0 0 3px #00a8be)}

nav{min-width:0}nav button{flex:1 1 0;min-width:0;padding:10px 4px;font-size:14px;white-space:nowrap}nav .ct-icon{flex-shrink:0}nav .nav-label{min-width:0;overflow:hidden;text-overflow:ellipsis}.shirt-view{margin:0 0 16px}.shirt-view button[aria-pressed=true]{color:var(--fg);border-color:#f5c400;box-shadow:inset 0 -3px #f5c400}.roster-view{flex:1 1 200px;justify-content:flex-end}.section-head>.actions{flex:0 1 auto;justify-content:flex-end}

.roster-toolbar{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin:16px 0 8px}.roster-toolbar>label{flex:1 1 240px;max-width:420px}.roster-toolbar .roster-view{flex:0 1 auto;gap:8px;justify-content:flex-start}.control-caption{width:100%;font-size:12px;font-weight:700;color:var(--muted)}.roster-toolbar .roster-view button{min-height:44px;padding:8px 14px;border-radius:10px;font-size:13px}.roster-toolbar .roster-view button[aria-pressed=true]{border-color:#f5c400;box-shadow:inset 0 -3px #f5c400}.section-head>#add{flex-shrink:0}

@media(max-width:600px),(min-width:601px) and (max-width:1100px) and (orientation:landscape){body{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;padding-bottom:0}header{flex:0 0 auto}main{flex:1 1 auto;min-height:0;width:100%;overflow-y:auto;overscroll-behavior-y:contain;margin:0 auto;padding-bottom:20px}nav{position:static;order:2;flex:0 0 auto;min-height:64px;background:transparent;border:0;box-shadow:none}nav button{background:transparent;border:0;box-shadow:none}footer{padding:20px 8px}}

/* Keep the pitch sidebar within its grid track at every viewport width. */
#cancha .pitch-layout{grid-template-columns:minmax(0,650px) minmax(0,1fr)}
#cancha .lineup-zone,#cancha .lineup,#cancha .bench{min-width:0;max-width:100%}
#cancha .bench{grid-template-columns:repeat(auto-fit,minmax(min(78px,100%),1fr))}
#cancha .bench button{min-width:0;max-width:100%;padding:8px 4px;overflow-wrap:anywhere}
#cancha .bench canvas{max-width:100%;object-fit:contain}
#selectedPitch{min-width:0;overflow-wrap:anywhere}
@media(max-width:900px){#cancha .pitch-layout{grid-template-columns:minmax(0,1fr)}}
/* History follows the existing five-section navigation and local source catalogue. */
.history-filters{max-width:760px;margin-bottom:24px}.history-club{max-width:880px;margin:0 auto 40px}.history-club>h3{font-size:24px;margin-bottom:8px}.history-events{list-style:none;padding:0 0 0 28px;margin:24px 0;border-left:2px solid var(--border)}.history-events>li{position:relative;margin:0 0 28px;padding:0 0 4px 8px}.history-events>li:before{content:'';position:absolute;left:-36px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--fg);border:2px solid var(--surface)}.history-events time{display:block;font-weight:800;color:var(--muted);margin-bottom:6px}.history-events h4{font-size:18px;margin:0 0 8px}.history-events p{line-height:1.6;overflow-wrap:anywhere}.history-sources{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;padding:0}.history-sources a{font-size:13px;text-underline-offset:3px;overflow-wrap:anywhere}#historia{min-width:0}@media(max-width:600px){nav{gap:2px;padding-left:4px;padding-right:4px}nav button{flex:1 1 20%;padding:8px 0}.history-events{padding-left:22px}.history-events>li:before{left:-30px}.history-club>h3{font-size:21px}.history-filters{grid-template-columns:1fr}.history-sources{display:block}.history-sources li{margin-bottom:8px}}@media(min-width:601px){nav button{font-size:13px}}

/* Readable player identities and breathing room in the lineup. */
#cancha .lineup-zone{margin-bottom:28px}
#cancha .lineup-zone h2{margin:0 0 14px}
#cancha .bench{gap:14px 12px}
#cancha .lineup-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px}
#cancha .lineup-name{display:block;width:100%;font-size:12px;line-height:1.35;overflow-wrap:anywhere}
#cancha .lineup-detail{font-size:12px;line-height:1.4}
#selectedPitch{margin-top:30px;padding-top:24px;border-top:1px solid var(--border-soft)}
#selectedPitch h3{margin:0 0 10px}#selectedPitch p{margin:0 0 16px}
#selectedPitch .actions{gap:12px;margin:0 0 22px}
#selectedPitch label{margin:18px 0 12px}
#cancha .pitch-player small{white-space:normal;overflow-wrap:anywhere;line-height:1.3;padding:5px 4px;font-weight:800;min-height:26px}
#cancha .bench{grid-template-columns:repeat(auto-fit,minmax(min(104px,100%),1fr))}
#cancha .lineup-name{overflow-wrap:normal;word-break:normal;font-size:12px}

.history-club>p.muted{white-space:pre-line;line-height:1.7;max-width:78ch;margin:16px 0 24px}.history-events>li>p{line-height:1.65;max-width:78ch}

/* Pitch labels retain full surnames without letter-by-letter wrapping on phones. */
#cancha .pitch-player small{width:max-content;min-width:100%;max-width:90px;position:relative;left:50%;transform:translateX(-50%);white-space:normal;overflow-wrap:normal;word-break:normal;font-size:10px;line-height:1.25;padding:4px 5px}
@media(max-width:600px){#cancha .pitch-player small{max-width:70px;font-size:9px;min-height:24px}#cancha .formation-bar{gap:10px;margin:18px 0}#cancha .section-head{margin-bottom:18px}#cancha .pitch-layout{margin-top:20px}#cancha .pitch-player canvas{max-height:88px;object-fit:contain}}
/* Keep pitch controls readable beyond the mobile breakpoint too. */
#cancha .formation-bar{margin:18px 0;gap:10px}
#cancha #pitchTypeHint{margin:16px 0;line-height:1.5}
#cancha .pitch-layout{margin-top:20px}

.beard-selector{display:grid;grid-template-columns:minmax(0,1fr) 100px;align-items:center;gap:16px;margin:12px 0 24px}.beard-stepper{display:flex;align-items:center;justify-content:center;gap:12px}.beard-stepper span{text-align:center;min-width:0}.beard-selector .head-card{margin:0}.beard-selector canvas{width:78px;height:86px;object-fit:contain}@media(max-width:480px){.beard-selector{grid-template-columns:minmax(0,1fr) 88px;gap:8px}.beard-stepper{gap:8px}.beard-stepper button{padding:8px 12px}.beard-stepper span{font-size:13px}}

/* Translucent navigation remains readable over scrolling content. */
nav{background:rgba(20,27,47,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);isolation:isolate}
body[data-theme="light"] nav{background:rgba(237,242,238,.88)}
nav button{background:transparent;border:0;box-shadow:none}

.player-save-status{flex-basis:100%;font-size:14px;color:var(--muted);padding:4px 0;min-height:24px}

/* Historical catalogue: separate reading, metadata and actions. */
#historicalTeams{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px;margin-top:24px;align-items:stretch}
#historicalTeams .historical-team-card{display:flex;flex-direction:column;gap:14px;padding:24px;min-width:0}
#historicalTeams .historical-team-card>h3{font-size:22px;line-height:1.25;margin:0 0 4px;overflow-wrap:break-word}
#historicalTeams .historical-summary{flex:1;font-size:15px;line-height:1.65;margin:0 0 6px}
#historicalTeams .historical-team-card>.small{font-size:13px;line-height:1.55;margin:0}
#historicalTeams .historical-team-card>a{font-size:14px;line-height:1.5;margin:2px 0 4px;padding-bottom:18px;border-bottom:1px solid var(--border)}
#historicalTeams .historical-team-card>label{display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.4;margin:0}
#historicalTeams .historical-team-card input,#historicalTeams .historical-team-card button,#historicalTeams .historical-team-card .custom-select{width:100%;min-width:0;max-width:100%;margin:0}
#historicalTeams .historical-team-card>button{font-size:15px;line-height:1.4;padding:12px 16px}
#historicalTeams .historical-update-label{padding-top:20px;margin-top:6px!important;border-top:1px solid var(--border)}
#historicalTeams .historical-team-card>[role=status]:empty{display:none}
#historicalTeams .historical-team-card>[role=status]{font-size:14px;line-height:1.5;margin:0}
@media(max-width:600px){#historicalTeams{grid-template-columns:minmax(0,1fr);gap:20px}#historicalTeams .historical-team-card{padding:20px;gap:14px}}

#historicalReferences{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:20px;margin-top:24px}.historical-reference-card{border:1px solid var(--border);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:14px;min-width:0}.historical-reference-card h3{font-size:20px;line-height:1.3;margin:0}.historical-reference-card p{font-size:13px;line-height:1.5;margin:0;flex:1}.historical-reference-card button{font-size:14px;margin:0}.historical-delete-request{display:grid;gap:14px;margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}.historical-delete-request label{display:grid;gap:10px;font-size:14px;line-height:1.5}#savedTeams>.panel{display:flex;flex-direction:column;gap:14px;min-width:0}#savedTeams>.panel>h3,#savedTeams>.panel>p{margin:0}#savedTeams>.panel>button{margin:0}

#savedTeams .team-heads{display:flex;flex-wrap:nowrap;justify-content:center;align-items:end;gap:0;width:100%;overflow:visible;margin:8px 0 16px}#savedTeams .team-heads canvas{flex:0 0 calc(100% / 11);width:calc(100% / 11);height:auto;aspect-ratio:3/5;margin:0;object-fit:contain;min-width:0}

#installHelp{max-width:min(34rem,calc(100% - 2rem));padding:24px;border:1px solid var(--border-soft);border-radius:24px;background:var(--surface,#142018);color:var(--fg,#fff)}#installHelp p{margin:16px 0;line-height:1.6}#installHelp::backdrop{background:#0009;backdrop-filter:blur(5px)}
/* Keep the full dorsal text legible on narrow pitches. */
#cancha .pitch-player small{overflow-wrap:anywhere;word-break:normal;text-overflow:clip;overflow:visible}

@media(max-width:600px){#cancha .pitch-player small.long-name{font-size:8.5px;letter-spacing:-.1px}}