:root{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;color:#111;background:white;font-size:17px}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;color:#007aff;background:none;border:0}button:disabled{opacity:.45;cursor:default}input,select{border:1px solid #c8c8ce;border-radius:7px;padding:8px;background:white;min-width:0}h1,h2,h3,p{margin:0}h1{font-size:34px}h2{font-size:28px;font-weight:400}h3{font-size:20px}.login{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:30px}.login-inner{width:100%;max-width:340px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}.login input{width:100%}.primary{background:#007aff;color:white;border-radius:8px;padding:9px 15px;font-weight:600}.muted{color:#777}.error{color:#d93636;font-size:14px}.header{background:#007aff;padding:16px;display:flex;align-items:center;gap:0}.header h1{font-weight:400;white-space:nowrap;flex:1}.nav-button{width:55px;height:55px;display:grid;place-items:center;padding:0}.nav-button img{width:30px;height:40px;object-fit:cover}.content{max-width:1200px;margin:auto;padding:20px}.split{display:grid;grid-template-columns:1fr 1fr;gap:20px}.stats{display:grid;grid-template-columns:1fr auto 1fr;gap:16px 20px;text-align:center;align-items:center;padding:16px;border-right:1px solid #ddd}.stats b:first-child{text-align:left}.stats b:nth-child(3){text-align:right}.pill{background:#007aff;color:white;padding:5px 12px;border-radius:30px;display:inline-block;font-size:15px}.latest{text-align:center;display:grid;align-content:start;justify-items:center;gap:10px}.scores{display:flex;align-items:center;gap:12px;font-size:28px}.score{color:white;background:#007aff;border-radius:18px;padding:16px 24px;font-weight:700}.link-block{display:block;width:100%;margin:18px 0}.chart-label{text-align:center;margin:20px}.chart{width:100%;height:200px;display:block}.list{padding:0;list-style:none;margin:12px 0}.list li{border-bottom:1px solid #ddd;padding:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.list li button{padding:0}.goals button{background:#007aff;color:white;border-radius:9px;padding:10px 14px;width:100%;display:flex;justify-content:space-between}.back{margin-bottom:18px}.card{border:1px solid #d5d5da;border-radius:10px;padding:15px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}.profile-tile{background:#eeeef0;border-radius:16px;padding:16px;display:grid;gap:8px;justify-items:center;color:#111}.avatar{width:100px;height:100px;border-radius:20px;background:#007aff;display:grid;place-items:center;font-size:48px}.stack{display:grid;gap:16px}.form-section{background:#f2f2f7;border-radius:10px;padding:16px;display:grid;gap:12px}.row{display:flex;gap:10px;align-items:center}.row label{flex:1}.spacer{flex:1}dialog{border:0;border-radius:12px;max-width:650px;width:calc(100% - 30px);max-height:90vh;padding:20px}dialog::backdrop{background:#0006}.shop-list{max-height:65vh;overflow:auto}.shop-row{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid #ddd}.shop-row .symbol{font-size:24px;width:35px}.shop-row .description{flex:1}.shop-row small{display:block;color:#777}.green{background:#34c759;color:white;border-radius:20px;padding:6px 12px}.warn{color:#b3261e}.loading{text-align:center;padding:40px}.highlight{background:#fff4bc}@media(max-width:700px){.header{flex-wrap:wrap}.header h1{width:100%;flex-basis:100%;font-size:28px}.split{grid-template-columns:1fr}.stats{border-right:0;border-bottom:1px solid #ddd}.content{padding:16px}.nav-button{width:50px}}
.offline-import{color:#007aff;cursor:pointer;font-size:17px}.offline-import input{display:block;max-width:280px;margin:8px auto}.stack details>summary{padding:8px;cursor:pointer}.stack .row small{color:#777}.stack form input[type=number]{width:110px}.avatar{position:relative;flex:none}.avatar .accessory{position:absolute;right:5px;top:3px;font-size:23px;line-height:1}.avatar .laurel{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;font-size:24px;padding:4px}.avatar .inner-ring{position:absolute;inset:8px;border:2px solid #fffd;border-radius:16px} [hidden]{display:none!important}
.swift-chart{margin:0 0 24px;padding:0 24px 0 0;height:200px;color:#6c6c70;font-size:12px}.chart-legend{height:22px;display:flex;gap:16px;justify-content:center;align-items:center}.chart-legend span{display:flex;align-items:center;gap:5px}.chart-legend i{display:inline-block;width:9px;height:9px;border-radius:50%}.legend-blue{background:#007aff}.legend-green{background:#34c759}.chart-plot{position:relative;height:calc(100% - 22px);padding:4px 26px 22px 0}.chart-grid{position:relative;height:100%;width:100%}.chart-grid-line{position:absolute;left:0;right:0;border-top:1px solid #e5e5e9}.chart-grid-line span{position:absolute;left:calc(100% + 7px);top:-7px;white-space:nowrap}.chart-grid svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.chart-grid polyline{fill:none;stroke:#007aff;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}.chart-grid polyline.second{stroke:#34c759}.chart-x-axis{height:22px;position:relative;margin-right:26px}.chart-x-label{position:absolute;top:6px;transform:translateX(-50%)}.chart-empty{height:200px}.chart-label{margin:12px 0;text-align:center}
.ios-form{max-width:900px;margin:auto;background:#f2f2f7;padding:0 20px 28px;border-radius:10px}.ios-nav-title{font-size:17px;font-weight:600;text-align:center;padding:14px 0;border-bottom:1px solid #d9d9df}.ios-section-title{font-size:13px;font-weight:400;text-transform:uppercase;color:#6d6d72;margin:25px 0 7px 16px}.ios-form .form-section{padding:0;gap:0;background:transparent}.ios-form .form-section>p,.ios-form .form-section>label,.ios-form .form-section>.ios-step-row,.ios-form .form-section>div:not(#scorer-row),.ios-form #scorer-row>label{background:#fff;padding:12px 16px;border-bottom:1px solid #e5e5ea}.ios-form .form-section>p:first-of-type{border-radius:10px 10px 0 0}.ios-form .form-section>.warn{background:#fff;padding:12px 16px;border-bottom:1px solid #e5e5ea}.ios-form .form-section>div:not(#scorer-row):last-child{border-radius:0 0 10px 10px}.ios-form .form-section label.row,.ios-form #scorer-row>label{display:flex;justify-content:space-between;align-items:center}.ios-form select{border:0;background:transparent;color:#007aff;text-align:right;padding:0}.ios-form .ios-list{background:white;border-radius:10px;overflow:hidden}.ios-form .ios-list li{border-color:#e5e5ea}.ios-step-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}.ios-stepper{display:flex;border-radius:8px;overflow:hidden;background:#e9e9eb;flex:none}.ios-stepper button{width:42px;height:30px;color:#111;font-size:22px;line-height:1}.ios-stepper button+button{border-left:1px solid #c9c9ce}.step-input{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none}
.profile-editor .sheet-nav{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d1d1d6;padding:0 0 12px}.profile-editor .sheet-nav button:last-child{font-weight:600}.profile-editor .sheet-content{padding:22px 0;background:#f2f2f7}.profile-editor .sheet-content input{width:100%;border:0;border-radius:10px;padding:12px 16px}.profile-editor .sheet-content .error{margin:10px 16px 0}dialog:has(.profile-editor){padding:16px;background:#f2f2f7}
/* SwiftUI HStacks retain their horizontal layout on compact screens. */
@media(max-width:700px){.header{flex-wrap:nowrap;gap:8px}.header h1{width:auto;flex:1 1 0;min-width:0;font-size:34px;line-height:1.18;white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:10;overflow:hidden}.nav-button{width:55px;flex:0 0 55px}.header>span{flex:none}.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0}.stats{min-width:0;grid-template-columns:minmax(0,1fr) minmax(0,auto) minmax(0,1fr);gap:16px 20px;border-right:1px solid #ddd;border-bottom:0;overflow-wrap:anywhere}.latest{min-width:0}.scores{gap:8px}.score{padding:16px 24px}.content{padding:16px}}
.chart-grid{background-image:repeating-linear-gradient(to right,transparent 0,transparent calc(12.5% - 1px),#dedee2 calc(12.5% - 1px),#dedee2 12.5%);background-size:100% 100%}.chart-grid-line{border-color:#d4d4d9}
@media(max-width:700px){.header h1{-webkit-line-clamp:9}.stats .pill{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.latest h3{font-weight:400}}
.chart-grid{background-image:none}.chart-grid::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,#d4d4d9 0 3px,transparent 3px 6px);mask-image:repeating-linear-gradient(to right,transparent 0,transparent calc(12.5% - 1px),#000 calc(12.5% - 1px),#000 12.5%);pointer-events:none}
@media(max-width:700px){.header{flex-wrap:wrap;column-gap:0;row-gap:4px}.header h1{flex:0 0 100%;width:100%;display:block;overflow:visible;white-space:normal;font-size:28px;line-height:1.2}.nav-button{flex:0 0 55px}.header>span{margin-left:8px}}
@media(max-width:700px){.nav-button{flex:1 1 0;min-width:0;max-width:55px}.header>span{flex:0 1 auto;min-width:0;max-width:calc(100% - 5 * 40px - 8px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media(max-width:700px){.header{display:grid;grid-template-columns:repeat(6,minmax(0,55px));column-gap:0}.header h1{grid-column:1/-1}.nav-button{width:100%;max-width:none}.header>span{margin-left:0;max-width:100%}}
@media(max-width:350px){.score{padding:16px 16px}.stats{gap:16px 8px}}
.destructive{color:#ff3b30!important}.profile-editor .sheet-content label{display:block;margin:18px 16px 8px;color:#6d6d72;font-size:13px}.profile-editor .sheet-content>p:not(.error){margin:0 16px 16px;line-height:1.4}
.nav-button{overflow:visible}.nav-button img{display:block;width:30px;height:40px;max-width:100%;max-height:100%;object-fit:contain;flex-shrink:0}
.nav-strip{display:flex;align-items:center;min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}.nav-strip .nav-button{flex:0 0 55px;width:55px;min-width:55px}.nav-strip>span{flex:none;white-space:nowrap;margin-left:8px}@media(max-width:700px){.header{display:flex;flex-wrap:wrap}.header h1{flex:0 0 100%}.nav-strip{width:100%;grid-column:auto}.nav-strip .nav-button{flex:0 0 55px}.nav-strip>span{max-width:none}}
/* Goles: keep each player's name and total readable inside the full-width button. */
.goals-title{margin-bottom:12px}.list.goals{margin:0;padding:0}.list.goals li{padding:8px 0;border-bottom:1px solid #e5e5ea}.list.goals li:last-child{border-bottom:0}.list.goals li button{width:100%;min-height:48px;padding:12px 16px;border-radius:10px;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;line-height:1.3}.list.goals li button span:first-child{min-width:0;overflow-wrap:anywhere}.list.goals li button span:last-child{flex:none;white-space:nowrap;font-variant-numeric:tabular-nums}.list.goals li button:focus-visible{outline:3px solid #004a99;outline-offset:2px}
.list.goal-matches li{padding:0}.list.goal-matches li button{width:100%;padding:12px;min-height:48px;display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left}.list.goal-matches li button span:first-child{min-width:0;overflow-wrap:anywhere}.list.goal-matches li button span:last-child{flex:none;white-space:nowrap}.ios-list li{min-width:0;overflow-wrap:anywhere}
.list li button.green{display:inline-flex;align-items:center;max-width:100%;padding:7px 14px;border-radius:999px;line-height:1.25;overflow-wrap:anywhere;text-align:left}.list li button.green:disabled{background:#8e8e93;opacity:1}
/* Avatar layers stay inside the rounded background and scale with each context. */
.avatar{width:var(--avatar-size,100px);height:var(--avatar-size,100px);border-radius:20%;position:relative;display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden;font-size:initial;line-height:1}.avatar .avatar-emoji{position:relative;z-index:2;display:block;font-size:calc(var(--avatar-size,100px)*.38);line-height:1}.avatar .avatar-ring{position:absolute;z-index:1;inset:3px;border:var(--ring-width,4px) solid var(--ring-color);border-radius:18%;pointer-events:none}.avatar .avatar-ring.dashed{border-style:dashed}.avatar .inner-ring{position:absolute;z-index:1;inset:10px;border:2px solid #fffc;border-radius:17%;pointer-events:none}.avatar .accessory{position:absolute;z-index:3;top:6%;right:6%;font-size:calc(var(--avatar-size,100px)*.23);line-height:1}.avatar .laurel{position:absolute;z-index:3;inset:0;display:flex;align-items:center;justify-content:space-between;font-size:calc(var(--avatar-size,100px)*.24);padding:6%;line-height:1;pointer-events:none}.avatar .laurel .flipped{transform:scaleX(-1)}
.color-swatch{display:block;width:28px;height:28px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px #0003}.color-swatch.ring-swatch{background:transparent;border:5px solid var(--swatch);box-shadow:0 0 0 1px #0003,inset 0 0 0 1px #0002}.bonus-info{display:grid;gap:4px;padding:12px 14px;border-radius:10px;background:#f2f2f7;color:#636366}.bonus-info span{font-weight:600}.bonus-info small{color:#6d6d72;line-height:1.35}.bonus-bajo{color:#207443}.bonus-medio{color:#a05a00}.bonus-alto{color:#7540a9}.shop-row small.bonus-bajo{color:#207443}.shop-row small.bonus-medio{color:#a05a00}.shop-row small.bonus-alto{color:#7540a9}
.latest-scorers{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;max-width:100%;min-width:0}.latest-scorers .scorer-pill,.list li button.green{display:inline-flex;align-items:center;justify-content:center;min-height:34px;max-width:100%;padding:7px 14px;border:0;border-radius:999px;background:#34c759;color:#fff;font-size:15px;font-weight:600;line-height:1.25;white-space:normal;overflow-wrap:anywhere;text-align:center}.latest-scorers .scorer-pill.unknown,.list li button.green:disabled{background:#8e8e93;opacity:1}.latest-scorers .scorer-pill:focus-visible,.list li button.green:focus-visible{outline:3px solid #004a99;outline-offset:2px}
.role-field{display:flex;align-items:center;gap:8px;color:#6d6d72;font-size:14px}.role-field select{color:#111;font-size:15px;max-width:150px}@media(max-width:700px){.card .row:has(.role-field){flex-wrap:wrap;gap:8px}.card .row:has(.role-field)>span:first-child{flex-basis:100%}.card .row:has(.role-field) .spacer{display:none}}