:root{--bg:#1c2a23;--bg-elev:#243a30;--text:#f4f1ea;--muted:#9aaaa1;--accent:#ffd400;--danger:#ff3b30;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}*,:before,:after{box-sizing:border-box}html,body,#root{background:var(--bg);width:100%;height:100%;color:var(--text);overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden}button{font-family:inherit;font-size:inherit;cursor:pointer;color:inherit;background:0 0;border:0}.app{width:100%;height:100dvh;padding-left:var(--safe-left);padding-right:var(--safe-right);padding-top:var(--safe-top);grid-template-rows:1fr;display:grid}.board-stage{padding:12px;padding-bottom:calc(4px + var(--safe-bottom));flex-direction:row;justify-content:center;align-items:stretch;gap:28px;min-width:0;min-height:0;display:flex;position:relative;overflow:hidden}.field-area{flex:auto;justify-content:center;align-items:center;min-width:0;min-height:0;display:flex;position:relative;container-type:size}.board-frame{border-radius:18px;width:min(100cqw,100cqh);height:min(100cqw,100cqh);position:relative;overflow:hidden;box-shadow:0 12px 40px #00000073}.annotation-canvas{display:block}.draw-banner{top:calc(12px + var(--safe-top));z-index:90;letter-spacing:.5px;text-transform:uppercase;color:#1c2a23;background:var(--accent);cursor:pointer;white-space:nowrap;border-radius:999px;align-items:center;gap:6px;padding:7px 12px;font-family:inherit;font-size:12px;font-weight:700;display:inline-flex;position:absolute;left:50%;transform:translate(-50%);box-shadow:0 4px 14px #00000059}.draw-banner:active{transform:translate(-50%)scale(.97)}@media (width<=600px){.draw-banner{top:calc(10px + var(--safe-top));padding:6px 10px;font-size:11px}}.toolbar{top:calc(12px + var(--safe-top));left:calc(12px + var(--safe-left));z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:auto;background:#1f2a23f2;border-radius:12px;flex-direction:column;gap:6px;padding:6px;display:flex;position:absolute}.toolbar-btn{width:44px;height:44px;color:var(--text);background:#0f1a14;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-size:16px;font-weight:600;transition:all 80ms;display:flex}.toolbar-btn:active:not(:disabled){background:#07110c}.toolbar-btn:disabled{opacity:.4;cursor:not-allowed}.toolbar-btn.is-active{background:var(--accent);color:#1c2a23}.swatches{border-top:1px solid #ffffff1a;flex-direction:column;gap:6px;padding-top:6px;display:flex}.swatch{cursor:pointer;border:3px solid #0f1a14;border-radius:999px;align-self:center;width:36px;height:36px;padding:0;transition:transform 80ms}.swatch:active{transform:scale(.95)}.swatch.is-active{border-color:var(--text);transform:scale(1.08)}.lineup-card{background:var(--bg-elev);border-radius:14px;flex-direction:column;flex:0 0 400px;width:400px;min-height:0;padding:12px 12px 8px;display:flex;overflow:hidden;box-shadow:0 8px 24px #00000059}.lineup-card__cols,.lineup-row{grid-template-columns:38px 64px 1fr;align-items:center;gap:6px;display:grid}.lineup-card__cols{letter-spacing:1px;text-transform:uppercase;color:var(--muted);padding:8px 4px 6px;font-size:11px;font-weight:700}.lineup-card__rows{flex:0 auto;min-height:0;margin:0;padding:0 0 4px;list-style:none;overflow-y:auto}.lineup-row{border-radius:8px;padding:4px}.lineup-row+.lineup-row{margin-top:2px}.lineup-row:focus-within{background:#ffd4000f}.lineup-row__order{color:var(--muted);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:6px;justify-content:flex-end;align-items:center;gap:2px;padding:6px 4px 6px 0;font-size:13px;font-weight:700;display:flex}.lineup-row__grip{color:#9aaaa173;flex-shrink:0}.lineup-row__order:hover{color:var(--text);background:#ffffff0f}.lineup-row__order:hover .lineup-row__grip{color:var(--muted)}.lineup-row__order:active{cursor:grabbing}.lineup-row.is-dragging{background:#ffd4001f}.lineup-row__pos,.lineup-row__name{color:var(--text);background:#0f1a14;border:1px solid #0f1a14;border-radius:8px;outline:none;min-width:0;padding:8px;font-family:inherit;font-size:14px;font-weight:600}.lineup-row__pos{appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);text-align:center;background-position:calc(100% - 14px),calc(100% - 9px);background-repeat:no-repeat;background-size:5px 5px,5px 5px;padding-right:22px;font-weight:800}.lineup-row__name{width:100%}.lineup-row__pos:focus,.lineup-row__name:focus{border-color:var(--accent)}.lineup-row__name::placeholder{color:#9aaaa18c}.lineup-card__add{letter-spacing:.5px;color:var(--muted);cursor:pointer;background:0 0;border:1px dashed #9aaaa159;border-radius:8px;justify-content:center;align-items:center;gap:6px;margin-top:8px;padding:8px 10px;font-family:inherit;font-size:13px;font-weight:700;transition:color .12s,border-color .12s,background .12s;display:flex}.lineup-card__add:hover{color:var(--text);border-color:var(--accent);background:#ffd4000f}.roster-overlay{z-index:10;background:#00000080;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.roster-card{background:var(--bg-elev);border-radius:18px;gap:14px;width:min(420px,100%);padding:22px;display:grid;box-shadow:0 20px 60px #0009}.roster-title{letter-spacing:.4px;font-size:28px;font-weight:800}.roster-label{color:var(--muted);text-transform:uppercase;letter-spacing:1.4px;gap:6px;font-size:13px;display:grid}.roster-label input{width:100%;color:var(--text);background:#0f1a14;border:1px solid #0f1a14;border-radius:12px;outline:none;padding:14px 16px;font-family:inherit;font-size:22px;font-weight:700}.roster-label input:focus{border-color:var(--accent)}.roster-actions{justify-content:flex-end;gap:10px;margin-top:4px;display:flex}.roster-actions button{letter-spacing:.3px;border-radius:12px;min-width:88px;min-height:48px;padding:0 18px;font-size:15px;font-weight:700}.roster-actions .ghost{color:var(--text);background:#0f1a14}.roster-actions .primary{background:var(--accent);color:#1c2a23}@media (orientation:portrait){.board-stage{flex-direction:column;gap:12px}.field-area{justify-content:center}.lineup-card{flex:none;width:100%;max-height:50%}}@media (width<=600px){.board-stage{padding:0;padding-bottom:calc(4px + var(--safe-bottom));flex-direction:column;gap:0}.board-frame{box-shadow:none;border-radius:0}.lineup-card{width:100%;max-height:45vh;box-shadow:none;border-radius:0;flex:none}.toolbar{top:calc(10px + var(--safe-top));left:calc(10px + var(--safe-left));flex-direction:row}.toolbar-btn{width:40px;height:40px;font-size:14px}.swatches{border-top:0;border-left:1px solid #ffffff1a;flex-direction:row;padding-top:0;padding-left:6px}.swatch{width:32px;height:32px}}@media (width<=380px){.toolbar-btn{width:40px;height:40px}}@media (height<=480px){.toolbar{top:calc(6px + var(--safe-top));left:calc(6px + var(--safe-left));gap:4px;padding:4px}.toolbar-btn{width:36px;height:36px;font-size:13px}}