:root{--color-court-bg:#14181f;--color-court-lines:#e8e4dc;--color-court-wood-1:#e0b57e;--color-court-wood-2:#cf9c5c;--color-court-line:#fbf8f2;--color-offense:#f2a340;--color-defense:#3fc1d6;--color-accent:#5fd98a;--color-danger:#e85d5d;--color-editor-bg:#fff;--color-editor-panel-bg:#eef0f3;--color-editor-panel-border:#e1e4e9;--color-editor-button-bg:#232a3b;--color-editor-button-bg-hover:#2f3a52;--color-editor-button-text:#fff;--color-editor-text:#1a1f29;--color-editor-text-muted:#6b7280;--color-bg:#14181f;--color-surface:#1b212b;--color-surface-raised:#232a36;--color-border:#323b49;--color-text:#e8e4dc;--color-text-muted:#9aa3b5;--font-ui:"Segoe UI", "Inter", system-ui, -apple-system, sans-serif;--font-body:"Segoe UI", "Inter", system-ui, -apple-system, sans-serif;--radius-sm:4px;--radius-md:8px;--radius-lg:14px;--space-1:4px;--space-2:8px;--space-3:16px;--space-4:24px;--space-5:32px;--shadow-card:0 2px 12px #00000059}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);margin:0;font-size:15px;line-height:1.5}h1,h2,h3,p,ul{margin:0}button{font-family:var(--font-ui);cursor:pointer}input{font-family:var(--font-body)}a{color:var(--color-accent)}.btn{justify-content:center;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-raised);color:var(--color-text);font-family:var(--font-ui);font-size:14px;font-weight:600;transition:border-color .15s,background .15s;display:inline-flex}.btn:hover:not(:disabled){border-color:var(--color-accent)}.btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--color-accent);border-color:var(--color-accent);color:#0c1712}.btn-primary:hover:not(:disabled){filter:brightness(1.08)}.btn[aria-pressed=true]{background:var(--color-accent);border-color:var(--color-accent);color:#0c1712}.field{padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);font-size:14px}.field::placeholder{color:var(--color-text-muted)}.field:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:var(--space-4)}.alert{color:var(--color-danger);font-size:13px}.page-heading{font-family:var(--font-ui);letter-spacing:-.02em;margin-bottom:var(--space-4);font-size:28px;font-weight:700}.loading-screen{height:100vh;color:var(--color-text-muted);font-family:var(--font-ui);justify-content:center;align-items:center;display:flex}.login-screen{min-height:100vh;padding:var(--space-4);justify-content:center;align-items:center;display:flex}.login-form{gap:var(--space-3);flex-direction:column;width:100%;max-width:340px;display:flex}.login-form h1{font-family:var(--font-ui);letter-spacing:-.02em;margin-bottom:var(--space-2);font-size:26px;font-weight:700}.playbook-list,.playbook-detail{max-width:760px;padding:var(--space-5) var(--space-4);margin:0 auto}.playbook-list__actions{gap:var(--space-2);margin-bottom:var(--space-4);display:flex}.playbook-list__create{gap:var(--space-2);margin-bottom:var(--space-4);flex-wrap:wrap;display:flex}.playbook-list__create .field{flex:160px}.playbook-list ul,.playbook-detail ul{gap:var(--space-2);flex-direction:column;padding:0;list-style:none;display:flex}.playbook-list li .btn{text-align:left;justify-content:flex-start;width:100%}.playbook-detail li label{text-align:left;flex:auto;justify-content:flex-start}.playbook-detail li .btn{flex:none}.playbook-detail__back{margin-bottom:var(--space-3)}.playbook-detail li{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);flex-wrap:wrap;display:flex}.play-editor{gap:var(--space-3);height:100vh;padding:var(--space-3);background:var(--color-editor-bg);color:var(--color-editor-text);grid-template:"header header header""phases center tools"1fr/150px 1fr 260px;display:grid}.play-editor__header{align-items:center;gap:var(--space-2);grid-area:header;display:flex}.play-editor__header .field{max-width:320px;font-family:var(--font-ui);background:var(--color-editor-panel-bg);border-color:var(--color-editor-panel-border);color:var(--color-editor-text);flex:auto;font-weight:600}.play-editor__header .btn-primary{background:var(--color-editor-button-bg);border-color:var(--color-editor-button-bg);color:var(--color-editor-button-text)}.play-editor__header .btn-primary:hover:not(:disabled){background:var(--color-editor-button-bg-hover);filter:none}.play-editor__center{gap:var(--space-2);flex-direction:column;grid-area:center;min-width:0;display:flex}.play-editor__hint{color:var(--color-editor-text-muted);font-size:13px;font-style:italic}.play-editor__canvas{padding:var(--space-3);background:var(--color-editor-panel-bg);border-radius:var(--radius-lg);border:1px solid var(--color-editor-panel-border);flex:auto;justify-content:center;align-items:flex-start;display:flex;overflow:auto}.play-editor__tools{gap:var(--space-3);flex-direction:column;grid-area:tools;display:flex;overflow-y:auto}.tool-sidebar{gap:var(--space-3);flex-direction:column;display:flex}.tool-card{background:var(--color-editor-panel-bg);border:1px solid var(--color-editor-panel-border);border-radius:var(--radius-lg);padding:var(--space-3);gap:var(--space-2);flex-direction:column;display:flex}.tool-card__title{font-family:var(--font-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--color-editor-text-muted);font-size:12px;font-weight:700}.tool-card__grid{gap:var(--space-2);display:grid}.tool-card__grid--actions{grid-template-columns:1fr 1fr}.tool-card__grid--players{grid-template-columns:repeat(5,1fr)}.tool-btn{justify-content:center;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-2);border-radius:var(--radius-sm);background:var(--color-editor-button-bg);color:var(--color-editor-button-text);font-family:var(--font-ui);border:none;font-size:13px;font-weight:600;transition:background .15s;display:inline-flex}.tool-btn:hover:not(:disabled){background:var(--color-editor-button-bg-hover)}.tool-btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.tool-btn[aria-pressed=true]{background:var(--color-accent);color:#0c1712}.tool-btn__icon{flex:none;display:inline-flex}.tool-btn--round{aspect-ratio:1;border-radius:50%;padding:0}.tool-btn--danger{background:var(--color-danger)}.tool-btn--danger:hover:not(:disabled){background:#d24747}.properties-panel__summary{font-family:var(--font-ui);font-size:14px;font-weight:600}.phase-sidebar{gap:var(--space-2);flex-direction:column;grid-area:phases;padding-right:2px;display:flex;overflow-y:auto}.phase-thumb{padding:var(--space-2);border-radius:var(--radius-md);background:var(--color-editor-panel-bg);font-family:var(--font-ui);color:var(--color-editor-text-muted);border:2px solid #0000;flex-direction:column;gap:4px;font-size:12px;font-weight:600;display:flex}.phase-thumb__preview{aspect-ratio:4/3;border-radius:var(--radius-sm);background:var(--color-court-wood-1);border:1px solid var(--color-editor-panel-border);width:100%;display:block}.phase-thumb[aria-pressed=true]{border-color:var(--color-accent);color:var(--color-editor-text)}.phase-thumb--add{color:var(--color-editor-text-muted);justify-content:center;align-items:center;font-size:20px}.play-editor .field{border-color:var(--color-editor-panel-border);color:var(--color-editor-text);background:#fff}.play-editor .btn{background:var(--color-editor-button-bg);border-color:var(--color-editor-button-bg);color:var(--color-editor-button-text)}.play-editor .btn:hover:not(:disabled){background:var(--color-editor-button-bg-hover);border-color:var(--color-editor-button-bg-hover)}@media (width<=860px){.play-editor{grid-template:"header""center""phases""tools"/1fr;height:auto;min-height:100vh;overflow:visible}.play-editor__header{flex-wrap:wrap}.play-editor__header .field{max-width:none}.phase-sidebar{flex-direction:row;padding-bottom:2px;overflow:auto visible}.phase-thumb{flex:0 0 88px}.phase-thumb--add{flex:0 0 48px}.tool-card__grid--players{grid-template-columns:repeat(5,minmax(0,1fr))}}.output-page,.public-play-page{max-width:900px;padding:var(--space-5) var(--space-4);margin:0 auto}.play-export__preview{max-width:900px;padding:var(--space-5) var(--space-4) 0;gap:var(--space-3);flex-direction:column;align-items:flex-start;margin:0 auto;display:flex}.output-grid{gap:var(--space-4);margin-top:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(300px,1fr));display:grid}.output-grid__item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-3);gap:var(--space-2);flex-direction:column;display:flex}.output-grid__item h2{font-family:var(--font-ui);color:var(--color-text-muted);font-size:15px}.output-grid__item ul,.animation-player ul{color:var(--color-text-muted);flex-direction:column;gap:2px;padding:0;font-size:13px;list-style:none;display:flex}.public-play-page h1,.output-page h1{font-family:var(--font-ui);margin-bottom:var(--space-3);font-size:26px;font-weight:700}.animation-player{gap:var(--space-3);flex-direction:column;align-items:flex-start;display:flex}.animation-player__controls{gap:var(--space-2);display:flex}.share-link-panel{gap:var(--space-2);align-items:center;display:flex}.share-link-panel input{flex:auto}