/* Apple Design: familiar controls, restrained materials, immediate feedback. */
:root{--ink:#1d1d1f;--paper:#f5f5f7;--muted:#6e6e73;--line:#e5e5ea;--accent:#007aff;--white:#fff;--radius:18px;font:100%/1.5 system-ui,sans-serif}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC',sans-serif;background:var(--paper);color:var(--ink);font-optical-sizing:auto}
.topbar{height:76px;padding:0 2rem;position:sticky;top:0;z-index:6;background:#ffffffdb;backdrop-filter:blur(24px) saturate(1.3);border:0;box-shadow:0 1px 0 #00000008;gap:28px}.brand{font-size:17px;font-weight:650;letter-spacing:-.5px}.brand-mark{width:34px;height:34px;border-radius:10px;background:#1d1d1f;color:white;font-size:25px;line-height:34px;transform:none}.brand small{font-size:10px;letter-spacing:0;color:var(--muted);font-weight:400}.project-heading{font-size:12px}#saveStatus{font-size:11px}.project-actions{gap:16px}.text-button{color:#0066cc}.text-button:hover{color:#004c99}.secondary{background:#eeeeF1;border:0;border-radius:9px;color:#1d1d1f;font-weight:500;padding:11px 16px}.secondary:hover{background:#e4e4e8}.primary{background:#007aff;color:#fff;border:0;border-radius:11px;font-weight:600;box-shadow:none;padding:13px 20px}.primary:hover{background:#0069df}.primary span{color:inherit}.icon-button{color:#56565b;border-radius:9px}.icon-button:hover{background:#e8e8ed}.compact{padding:10px 14px}.dropdown{top:45px;background:#fffffff2;backdrop-filter:blur(25px);border:1px solid #0000000c;border-radius:13px;box-shadow:0 12px 40px #00000020;padding:5px;width:200px}.dropdown button{background:transparent;border-radius:8px;color:#1d1d1f}.dropdown button:hover{background:#007aff;color:white}
.workflow{padding:20px 32px 16px;border:0;background:transparent;max-width:1760px;margin:auto}.workflow nav{background:#e8e8ed;border-radius:13px;padding:4px;gap:3px;flex:1;max-width:680px}.workflow nav button{display:flex;justify-content:center;flex:1;align-items:center;gap:9px;padding:10px 12px;border-radius:10px;color:#626268;font-size:13px;font-weight:500;min-height:43px}.workflow nav button>small,.step-line{display:none}.workflow nav button>span{border:0;background:transparent;width:20px;height:20px;font:11px system-ui;color:inherit;border-radius:50%}.workflow nav button[aria-current=step]{background:#fff;color:#1d1d1f;box-shadow:0 2px 5px #0000000c;font-weight:600}.workflow nav button[aria-current=step]>span{background:#007aff;color:#fff}.workflow nav button.complete>span{color:#007aff;background:transparent}.template-tag{font-size:11px;letter-spacing:0;color:#6e6e73}.template-tag i{background:#34a853}
.workspace{grid-template-columns:380px minmax(0,1fr);padding:24px 32px 48px;gap:36px;max-width:1760px}.editor-heading{margin:0 0 25px}.eyebrow{font-size:10px;letter-spacing:1.2px;font-weight:600;color:#86868b}h1{font-size:27px;font-weight:650;letter-spacing:-1px;line-height:1.25;margin-bottom:9px}.editor-heading p{font-size:12px;line-height:1.65;color:var(--muted)}.form-card{border:0;box-shadow:0 1px 3px #00000004;border-radius:18px;padding:22px;margin-bottom:18px}.form-card label,.field-row label,.player-form-fields>label{font-size:12px;font-weight:500;color:#424247}.section-caption{font-size:14px;font-weight:600}.optional{color:#86868b;letter-spacing:0}.required{color:#007aff}
input:not([type=checkbox],[type=range],[type=file],[type=color]),select{background:#f5f5f7;border:1px solid #e5e5ea;border-radius:9px;padding:11px 12px;font-size:13px;min-height:43px;box-shadow:none;color:#1d1d1f}input::placeholder{color:#85858b}input[type=range],input[type=checkbox],input[type=radio]{accent-color:#007aff}input[type=range]{height:22px}.color-control{background:#f5f5f7;border:1px solid #e5e5ea;border-radius:9px}.color-control span{color:#6e6e73}.field-hint{color:#717178;line-height:1.65}.remove-link{color:#6e6e73}.remove-link:hover{color:#d70015}.switch span{background:#d2d2d7}.switch input:checked+span{background:#34c759}.check-row input{accent-color:#007aff}.check-row{line-height:1.6}.crest-upload,.club-upload{border:1px solid #e5e5ea;background:#f5f5f7;border-radius:12px}.background-upload{border-radius:12px}.upload-row{margin-top:20px}.palette-choices button{border-radius:10px}.palette-choice.active,.palette-choice[aria-checked=true]{border-color:#007aff}.font-specimen{background:#f5f5f7;border:0;border-radius:12px;padding:18px;color:#1d1d1f}
.setup-section{border:0;border-radius:18px;margin-bottom:18px;box-shadow:0 1px 3px #00000004;background:white}.setup-section>summary{padding:21px 22px;font-size:14px;gap:12px;font-weight:600}.setup-section>summary:after{font-size:19px;color:#86868b}.setup-section>summary small{color:#86868b;font-size:10px}.setup-section>.form-card{border-top:1px solid #f0f0f3}.format-picker{gap:0;border-radius:11px;background:#eeeef2;padding:4px}.format-picker legend{font-size:12px;padding:0 0 8px}.format-picker label>span{border:0;background:transparent;border-radius:8px;text-align:center;padding:12px 6px;color:#6e6e73;font-size:12px}.format-picker b{font-size:21px;letter-spacing:-.5px}.format-picker small{font-size:10px;color:#86868b}.format-picker input:checked+span{background:#fff;color:#1d1d1f;box-shadow:0 2px 5px #00000012;border:0}.format-picker input:checked+span b{color:#007aff}.format-picker input:checked+span small{color:#6e6e73}
.tactics-board{background:#edf3fa;color:#314459;padding:16px;border-radius:14px}.tactics-heading span{color:#61748a;font-size:9px;letter-spacing:1px}.tactics-heading strong{font-weight:600;letter-spacing:1px}.tactics-pitch{border-color:#bacbdd;height:210px;background:linear-gradient(0deg,transparent 49.7%,#bacbdd 49.7%,#bacbdd 50.3%,transparent 50.3%)}.tactics-pitch:before{border-color:#bacbdd}.tactics-pitch:after{background:linear-gradient(#bacbdd50,#bacbdd50) top/100% 30px no-repeat,linear-gradient(#bacbdd50,#bacbdd50) bottom/100% 30px no-repeat}.tactics-player{background:#fff;color:#007aff;border:1px solid #c5d4e3;box-shadow:0 2px 3px #35587710;width:27px;height:27px}.tactics-player:hover{background:#007aff;color:#fff}.tactics-board p{color:#61748a}.roster-title{font-size:14px;font-weight:600}.roster-title b{background:#e5edfa;color:#0066cc;border-radius:5px}.roster-instruction{color:#86868b}.roster-group{color:#6e6e73;font-size:10px;font-weight:500;text-transform:none;letter-spacing:.3px;padding:14px 4px 8px;margin-top:5px}.roster-player{border:0;background:white;border-radius:13px;padding:12px;min-height:68px;gap:11px;box-shadow:0 1px 2px #00000004}.roster-player:hover{background:#eef5ff}.roster-player .shirt{color:#86868b}.drag-handle{color:#aaaab0}.player-info strong{font-size:13px;font-weight:550;letter-spacing:0}.player-info small{color:#86868b;font-size:10px}.captain-badge{background:#e5efff;color:#0066cc}.roster-ghost{background:#ddebff}.inactive-section{border:0;background:#eaeaf0;border-radius:13px;padding:16px}.inactive-section summary{font-size:12px;color:#6e6e73}
.preview-area{top:100px}.preview-top{font-size:12px;margin-bottom:13px}.live-indicator{background:#34c759}.viewer{border-radius:16px;overflow:hidden;box-shadow:0 10px 40px #0000000a,0 0 0 1px #00000004;border:0}.playback{background:#fff;padding:12px 16px;gap:12px}.play-button{background:#007aff;color:white;border-radius:50%;width:34px;height:34px}.playback input{accent-color:#007aff}.chapters{gap:5px;margin-top:16px;flex-wrap:wrap}.chapters button{border:0;background:transparent;padding:8px 13px;border-radius:20px;color:#6e6e73;font-size:11px}.chapters button:hover{background:#e8e8ed;color:#1d1d1f}.chapters button.active{background:#e4efff;color:#0066cc}.preview-caption{color:#86868b;font-size:10px}.preview-bottom{margin-top:22px;padding-top:22px;border-color:#e5e5ea}.format-stamp{color:#6e6e73}.tip{border:0;background:#ededf1;border-radius:12px;padding:14px 16px}.tip>span{color:#6e6e73}.tip p{color:#6e6e73}.team-signature strong{font-size:14px;font-weight:600}.team-signature span{color:#86868b}.editor-footer{border:0;background:#f5f5f7e8;backdrop-filter:blur(20px);padding-block:14px;box-shadow:0 -12px 20px #f5f5f7a0}.ready-card{background:white;color:#1d1d1f}.ready-card .ready-icon{background:#e7f5ec;color:#248a3d}.ready-card h2{font-weight:600;letter-spacing:-.5px}.ready-card dl{font-size:12px}.privacy-note{color:#86868b}.progress-track{background:#e8e8ed;border-radius:5px}.progress-track>div{background:#007aff}.download-again{color:#0066cc}.export-result{border-color:#e5e5ea;border-radius:12px}
dialog{border:1px solid #ffffff90;background:#fbfbfdf5;backdrop-filter:blur(30px);border-radius:24px;box-shadow:0 30px 100px #00000030;color:#1d1d1f}dialog::backdrop{background:#00000040;backdrop-filter:blur(3px)}.dialog-header{border-color:#e5e5ea;padding:23px 26px}.dialog-header h2{font-size:23px;font-weight:600;letter-spacing:-.6px}.dialog-header .icon-button{background:#e9e9ef;border-radius:50%;font-size:23px;width:32px;height:32px;min-height:32px}.dialog-footer{background:#f5f5f7;border-color:#e5e5ea;padding:18px 26px}.player-dialog-body{gap:25px;padding:24px 26px}.portrait-column{background:#f0f0f4;border-radius:16px;padding:16px}.dialog-footer span{color:#6e6e73}.toast{background:#242426ee;color:white;border-radius:14px;box-shadow:0 8px 30px #00000018;backdrop-filter:blur(20px);font-size:13px;padding:14px 22px}.storage-warning{background:#fff4df;border:1px solid #eddab1;padding:16px;border-radius:13px;font-size:12px;color:#785119;margin-block:16px}.history-note{padding:0 26px;color:#6e6e73;font-size:12px}.history-row{display:flex;gap:20px;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid #e5e5ea;font-size:12px}#historyDialog{width:min(560px,92vw)}#historyList{padding:20px 26px;font-size:13px}.site-footer{border-color:#e5e5ea;color:#86868b;font-size:11px}.site-footer a{color:#6e6e73}
button{transition:background .14s ease,color .14s ease,box-shadow .14s ease;touch-action:manipulation}button:active:not(:disabled){filter:brightness(.93);transform:none}.primary:active:not(:disabled),.secondary:active:not(:disabled){transform:scale(.98)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #007aff88;outline-offset:3px}.format-picker input:focus-visible+span{outline-color:#007aff88}.switch input:focus-visible+span{outline:3px solid #007aff88;outline-offset:3px}.tactics-player:active:not(:disabled){transform:translate(-50%,-50%) scale(.96)}
@media(min-width:1700px){.workspace{grid-template-columns:410px minmax(0,1fr);gap:44px}}
@media(max-width:1100px){.workspace{grid-template-columns:340px minmax(0,1fr);padding:24px;gap:24px}.topbar,.workflow{padding-inline:24px}}
@media(max-width:800px){.topbar{position:relative;height:auto;min-height:76px;padding:16px 20px;gap:12px}.workflow{padding:12px 16px}.workflow nav{padding:4px;gap:0}.workflow nav button{font-size:11px;padding:10px 4px;gap:5px}.workflow nav button>span{width:17px;height:17px;font-size:10px}.workspace{display:flex;padding:16px;gap:24px}.editor,.preview-area{width:100%}.preview-area{position:static;order:-1}.editor-heading{margin-bottom:20px}.form-card{padding:20px}.setup-section>summary{padding:20px}.viewer{border-radius:14px}.preview-caption{font-size:9px}.chapters button{padding:8px 10px}.dialog-header,.dialog-footer{padding:18px}.player-dialog-body{padding:18px;gap:16px}dialog{border-radius:20px}.project-actions{gap:10px}.topbar .brand small{font-size:9px}.editor-footer{padding-inline:0}.site-footer{padding:20px}}
@media(prefers-reduced-transparency:reduce){.topbar,dialog{background:#fff;backdrop-filter:none}.editor-footer{background:#f5f5f7;backdrop-filter:none}.dropdown{background:#fff;backdrop-filter:none}.toast{background:#242426;backdrop-filter:none}}
@media(prefers-contrast:more){:root{--muted:#444;--line:#777}.form-card,.setup-section,.roster-player,.secondary,.workflow nav{border:1px solid #777}.topbar,dialog{background:white;backdrop-filter:none}.field-hint,.roster-group,.player-info small{color:#444}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.primary:active:not(:disabled),.secondary:active:not(:disabled){transform:none}}
.chapters button[aria-current=true]{background:#e4efff;color:#0066cc;border-color:transparent}.palette-choice[aria-pressed="true"]{outline:2px solid #007aff}.setup-section>summary:focus-visible{outline-color:#007aff88}
@media(max-width:800px){.project-heading{display:flex;flex:none;margin-left:auto;max-width:145px}.project-heading>span:first-child{display:none}#saveStatus{font-size:10px;white-space:normal}.project-actions{width:100%;justify-content:flex-end}}

/* Release notes share the editor's quiet, compact dialog language. */
.release-dialog{width:min(540px,calc(100vw - 32px));padding:28px;box-sizing:border-box}
.release-dialog .dialog-header{padding:0 0 8px;border:0}
.release-dialog h2{font-size:28px;letter-spacing:-.6px;margin:8px 0}
.release-dialog #releaseSummary{color:#646970;font-size:14px;line-height:1.6;margin:8px 0 24px}
.release-list{list-style:none;padding:0;margin:0;display:grid;gap:20px}
.release-list li{display:grid;gap:5px}
.release-list strong{font-size:15px;font-weight:600;color:#1d1d1f}
.release-list span{font-size:14px;line-height:1.65;color:#646970}
.release-dialog .dialog-footer{padding:24px 0 0;margin-top:24px}
@media(max-width:540px){.release-dialog{padding:22px}.release-dialog h2{font-size:25px}.release-list{gap:16px}.release-dialog .dialog-footer{flex-wrap:wrap;gap:16px}}

.format-picker{flex-wrap:wrap}.format-picker label{flex:1;min-width:84px}
.custom-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 8px}.custom-heading strong{font-size:14px}
.custom-pitch{position:relative;aspect-ratio:4/5;max-width:430px;margin:16px auto;border:1px solid #b8d6c8;border-radius:20px;background:linear-gradient(to bottom,#f8f0dd 0 20.6%,#e5efff 20.6% 44.1%,#e6f5ed 44.1% 66.8%,#fff0e8 66.8% 100%);touch-action:none;cursor:crosshair;overflow:hidden;isolation:isolate}
.custom-pitch::before{content:'';position:absolute;inset:5%;border:2px solid #fff;border-radius:2px;pointer-events:none}
.pitch-line{position:absolute;border:2px solid #fff;pointer-events:none}.halfway{top:50%;left:5%;width:90%;border-width:2px 0 0}.centre-circle{width:25%;aspect-ratio:1;left:37.5%;top:40%;border-radius:50%}.penalty{width:46%;height:15%;left:27%}.penalty.home{top:5%}.penalty.away{bottom:5%}.zone-label{position:absolute;right:7%;font-size:10px;color:#596c67;pointer-events:none}.zone-label.gk{top:8%}.zone-label.def{top:28%}.zone-label.mid{top:52%}.zone-label.fwd{top:78%}
.custom-piece{--piece:#147bdb;position:absolute;z-index:1;width:40px;height:40px;border:3px solid white;border-radius:50%;background:var(--piece);color:white;font-size:15px;font-weight:700;box-shadow:0 2px 5px #173d3329;transform:translate(-50%,-50%);cursor:grab;touch-action:none;padding:0}
.custom-piece[data-line="0"]{--piece:#94651a}.custom-piece[data-line="1"]{--piece:#1767c3}.custom-piece[data-line="2"]{--piece:#178052}.custom-piece[data-line="3"]{--piece:#c45623}.custom-piece[aria-pressed="true"]{outline:3px solid #172d46;outline-offset:2px}.custom-piece.grabbed{cursor:grabbing;box-shadow:0 7px 16px #173d3340;z-index:3}.custom-piece:active{transform:translate(-50%,-50%) scale(1.06)}
.custom-legend,.custom-add{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:12px 0}.custom-legend span{font-size:12px;display:flex;align-items:center;gap:5px}.custom-legend span::before{content:'';width:7px;height:7px;background:#94651a;border-radius:50%}.custom-legend [data-line="1"]::before{background:#1767c3}.custom-legend [data-line="2"]::before{background:#178052}.custom-legend [data-line="3"]::before{background:#c45623}
.custom-add{gap:8px}.custom-add button{flex:1;font-size:12px}.custom-selection{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:12px;background:#f4f5f7;border-radius:12px}.custom-selection span{width:100%;font-size:13px;font-weight:600}#customMessage{min-height:2.8em;line-height:1.5}#customTactics[hidden],#presetTactics[hidden],#customSelection[hidden]{display:none}
.format-picker{grid-template-columns:repeat(3,minmax(0,1fr))}.format-picker label{min-width:0}.format-picker label span{padding:12px 5px}.format-picker label small{font-size:9px}.format-picker label b{font-size:19px}
.formation-settings:has(#customTactics:not([hidden]))>.field-row{grid-template-columns:1fr}